Is there a way to handle "datetime-selection" event with <input type='datetime-local'> control?
onchange, onselect and oninput does not work for me.
(In chrome) the onchange event triggers when the field is completely filled
Also have a read of Why is HTML5 input type datetime removed from browsers already supporting it?
Since onchange does not occur until after the field is fully filled in I ended up doing an onselect that sends new Date() to the onchange handler if the field does not yet have a value. This eliminates the false sense of a value being set (perhaps on a backing object) on the field before the time part of dateime-local is set.
Related
I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.
I have a large form that contains several text input fields. Essentially, I need to handle the onchange event for all fields and the onblur events for some fields. When a change is made to a field and the field loses focus, both events fire (which is the correct behavior). The only issue is that I would like to handle the onblur
event before I handle the onchange event.
After some testing in ie and Firefox, it seems that the default behavior is to fire the onchange event before onblur. I have been using the following code as a test...
<html>
<body >
<input type="text" value="here is a text field" onchange="console.log('Change Event!')" onblur="console.log('Blur Event!')" >
</body>
</html>
Which brings me to my questions:
It seems that this behavior is consistent across browsers. Why does onchange fire first?
Since I cannot handle the onblur event for every input element, is there a way I can get onblur to fire before handling the onchange event?
The reason onchange fires first is that once the element loses focus (i.e. 'blurs') the change is usually complete (I say usually because a script can still change the element without user interaction).
For those elements that need onblur handled first, you can disable the onchange handler and fire the onchange (or even a custom event) from the onblur handler. This will ensure the correct order even though it is more work. To detect change, you can use a state variable for that field.
As a general remark though, the need for such synchronicity is a sign that the approach you are using to solve whatever problem you are solving might need more work even though sometimes it cannot be avoided. If you are sure this is the only way, try one of these methods!
EDIT: Just to elaborate on the last point, you would have to follow some assumptions about your event model. Are you assuming that each change event is followed by a blur and goes unprocessed otherwise, or would you like to process each change but those that are followed by a blurget further processing after whatever onblur does with them? In any case if you want to enforce the order the handlers would need access to a common resource (global variable, property, etc.). Are there other event types you might want to use? (input?). Finally, this link has some details for the change event for Mozilla browsers:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change.
The third 'bullet' addresses the issue of event order.
This is a bit of hack, but it seems to do the trick on most browsers:
<input type="text" value="Text Input" onchange="setTimeout(function(){console.log('Change Event!')}, 0);" onblur="console.log('Blur Event!');" />
You can see a fiddle of it in action here: http://jsfiddle.net/XpPhE/
Here is a little background information on the setTimeout(function, 0) trick: http://javascript.info/tutorial/events-and-timing-depth
Hope that helps :)
Please note: I do not want to use jQuery for this (otherwise I like it)
Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")
Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?
Use onkeyup instead of onchange then.
Following is a simple way of invoking each type of Key Press on field.
input type="text" onkeypress="myFunction()
Get Example here
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Enjoy..
you can also use onkeyup and onkeydown instead of onkeypress.
Tried onkeypress="myFunction()" or onkeyup="myFunction()"?
There are also events for onfocus and onblur for entering and leaving a textfield :)
You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.
I have a form with some dates to be filled in. I'm using Cold Fusion, but here am using just the form and input tags, not the "enhanced" CF tags. The user can select these dates only from a Javascript calendar. The calendar works fine, the dates get filled in, the Javascript function "validx" is working, but the onchange does not fire with this data entry method.
<input
type = "text"
id = "#colid#"
class = "calendarSelectDate" {this fires the calendar}
name = "#col#"
readonly
onclick = "tooltip(#i#)"
onchange = "validx(#i#, #top#, '#thecase#', '#themsg#')"
value = "#sv#" >
I can get onblur to do the job, but would really prefer onchange. Anyone have a way to do this? Thanks.
I believe you are misunderstanding the purpose of onchange. This event fires when the user blurs the checkbox after making a change. By definition it requires a blur. Perhaps you should look into onkeyup or similar events involving keypresses.
I want to know get text box value when I type the value by every key press.
I have to get the value.
If I type numbers I have to get, so I have checking with that value.
var my_input = document.getElementById('my_input');
my_input.onkeyup = function() {
alert(my_input.value);
}
<input type='text' id='my_input' />
Probably you will have to serve events on input field: onkeypress, onkeyup, onkeydown, onpaste, onchange.
You can get the value of an input element from its value property, e.g.
element.value
To execute some function on every key press, you should bind an event handler for the keyup event to this element.
You should make yourself familiar with event handling in JavaScript and the variations in the different browsers. The site I linked to (quirksmode.org) is a very good resource for that.
One thing to note is that in certain browsers the method by which you get the value of a textarea differs. I'm thinking in IE6, at least, it actually registers the value of a textarea as it's innerHTML (or the other way around).
Worth doing a check in you eventListener for if the value is set, or not, and checking the innerHTML if it's not, just in case!