I have an <input> textbox.
I wish to call a function when it has been modified. The default behavior of the change event is to only trigger on blur, but I need to call my function as soon as the textbox's text changes and can't wait for blur.
I'm not sure the best way to do this. I thought of maybe handling keydown and then testing the value of the keyCode for a key that would modify the value. So... ignore arrow keys, etc. But that seems awkward and I don't think I can figure out the test to make it work.
I also thought about recording the inital value and comparing to this value but then I wouldn't be notified in the case when the value changes back to the original.
Maybe there's a better way?
I'd appreciate any suggestions.
a combination of focus and keyup is probably your best bet. record the initial value in the focus handler, and check against the current value in the keyup handler. (the new input value, if any, is available when keyup fires).
You can use the keypress function.
You can use the change() function
Related
I am looking for a way to bind a function to a text box that executes when the text of the text box changed. I want to avoid the use of keyup or keypress, and other similar things. I don't want it to fire when I lose focus of it, just when the text changes. This needs to definitely work in IE browsers, and preferably work in other browsers.
Does anyone know which is the event to do this?
Thanks.
You might be able to try a setTimeout handler that just checks the value of that textbox every so often and will detect when it changes by comparing the current value to the last value.
I see that you've found a workaround but I just wanted to offer this anyways. Much more granular control.
$('#searchbox').on('keyup, keydown, change', function(e) {
if(e.keyCode!= 9 || e.keyCode!= 16 || e.keyCode!= 17 || e.keyCode!= 18){
//Find keys that you don't want triggering your event and add them in the IF statement above
//http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
//Put code here that calls AJAX
}
});
I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?
You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH
You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.
I would like to know if my
<input type="text">
field is changed during edition, not only when it's blured. How to achieve this "nicely" using JQuery? My best idea is to check on every keydown() event if anything has changed, then trigger i.e. change() if so. Can this be done better?
Not really, but I would suggest using keyup, because the value will be 1 keystroke behind at that point.
Example:
User types: "blah", keydown for the "h" would return the value "bla" because the value hasn't technically changed yet. Plus what if they hold down the key yielding repeating characters?
keyup isn't expensive in the browser really if thats what you're worried about.
What are you trying to accomplish exactly and I can edit this with a better example.
When I have two text fields which listen to change event from one to another, it causes me an error saying too much recursion. Anyone has good solution?
well you can hold a flag that holds the identity of the true event dispatcher. and break the event triggering if it matches.
You added an onchange event listener on both text fields; problem is, changing one text will trigger a change one the other field, which would trigger the onchange result for the first one, etc., resulting in an infinite loop.
In one of my selection boxes, I have an onChange="..." specified...
because I want to change some other form value after any selection changes.
However, in the same page, some weird case I have to manually set the value.
So I have to use some JavaScript to set the value of the selection combobox, but in this case, I don't want that onChange event to be fired.
How can I walk around it?
Forgot to mention that I am actually using dijit.form.comboBox.
For normal HTML form comboBox, it won't cause any issue.
Only I use the dijit comboBox, and I try to set the value to some other value, dojo will trigger the onChange.
If you are using Dijit, then you can pass an additional false flag at the end of the set() method that will prevent the widget from firing the onChange event.
For example:
dijit.byId(myComboBox).set("value","Choose an option...",false);
Found this answer from Paul Christopher at http://dojo-toolkit.33424.n3.nabble.com/onchange-event-firing-when-setting-value-of-a-Select-programmatically-td3985692.html. It worked perfectly!
myDigit._lastValueReported = myValue;
myDigit.set('value', myValue);
You don't need to do anything. Setting the value with Javascript will not fire your onchange event handler.
In general, setting the value with JavaScript won't fire onchange. If you're dealing with a strange browser that does fire it, you could remove the onChange (element.onchange = null), change the value, then add it back (element.onchange = functionname) afterwards.
FYI, this answer is not fully correct. It is true that simply setting the value does not trigger the onChange event, BUT as soon as the control loses focus, the change will be detected and onChange will be fired.
So delaying onChange is not really the same as preventing onChange - which is what I need to do!
I could temporarily remove the event, blur and refocus the field, and then restore the event, but this is an ugly hack. It is complicated by dynamicaly added events like jQuery. so really what I'd like is to set the 'focus value' to the 'new value', but haven't been able to find this. I could try setting the defaultValue, but this would prevent a correct form.reset().