jQuery on change doesnt fire when the same input is re-entered - javascript

I have this form where you enter something in the input field and i have added an onchange event listener to throw an alert when the value is changed. Apparently the code works in Chrome but in Firefox it doesnt work if we re-enter the same text.
Example:
1st try --> Enters the text -> Hello. (Alerts as Text changed).
2nd try --> Enters the text -> Hello. (again) (on Change event isnt called).
Can anyone tell me why this is happening ? Thank you for your time in advance :).
Here is a jsfiddle.
http://jsfiddle.net/neoragex/6yMsf/1/

You may handle blur event. It would be fired even if value is the same.

Because the event only fires when the value of the input field changes - You're setting the same value again, so no change happens as far as the browser is concerned.

$(function() {
$('input[type=text]').on('blur',function() {
alert($(this).val());
});
});​

Try with keyup event. This event fire when a key press.

Related

jQuery change event is not working as expected

I have added change event on the input field so that whenever user enters the text into it, so other task should happen, it works but when i click outside the input field.I don't know whether it is default behavior or i am doing some thing wrong. I tried using keyup and keydown events and it works as expect.
Please suggest.
Here is my code:
$("#mobile-number").on('change',function(){
// some other code
});
The change event fires when an elements value changes.
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
In other words, on an input, the change event fires when the element loses focus, not when you type, and that is the default behaviour.
That's why there are key events as well, and on modern browsers you can catch most changes to an input with the input event
$("#mobile-number").on('input',function(){ ...
Yes, it is the desired behavior.
Change Event
The change event is fired for , , and
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
Depending on the kind of form element being changed and the way the
user interacts with the element, the change event fires at a different
moment:
When the element is activated (by clicking or using the keyboard) for and ;
When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a
date from a date picker for , by selecting a file
in the file picker for , etc.);
When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or ).
Try using input event:
$(function() {
$("#mobile-number").on('input', function() {
$("#copy").val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='text' id='mobile-number' />
<input type='text' id='copy' readonly/>
Try this:( If i really understand your problem )
jQuery(document).on('change', '#mobile-number', function() {
// some other code
});
for type event:
jQuery(document).on('keyup', '#mobile-number', function() {
// some other code
});
You should provide your selector to the .on function:
$(document).on('change', '#mobile-number', function() {
// some other code
});

detect on change of text box in jquery

I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated
Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation
You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/
If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/
Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions

jquery `on change` doesn't recognize when you set textbox value programmatically

I want to clear out a textbox when I call:
$('#textBox').val(''); or $('#textBox').empty();
Originally, when I would manually backspace and delete the text out of the text box, the on change function would fire. If I run $('#textBox').val('') above, on change does not fire:
$(document).ready(function() {
$('#textBox').on('change', function(){
Why is this?
Use trigger, like this:
$("#testBox").val("").trigger("change");
When you change the value programmatically, just trigger the change event using trigger.
$("#myid").trigger("change");
It's not jQuery that doesn't fire the event, it's the browser. If you look it up in the specs you'll see the definition of the change event:
change
The change event occurs when a control loses the input focus and its value has been
modified since gaining focus. This event is valid for INPUT, SELECT, and
TEXTAREA. element.
Bubbles: Yes
Cancelable: No
Context Info: None
As already posted, your problem can be mitigated by triggering the event manually via trigger().

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please
If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});
may be you want use event.preventDefault
Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});

onfocus is not called when using the autofocus attribute on an input tag

In the following example, I get only one alert box. I read that the focus is put before the JavaScript code is executed. Is there a way to get this to work on?
<input id="i" type="text" autofocus onfocus="alert(1)">
<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
alert(2);
}, false);
</script>
(I have only tested this in Safari)
Edit:
I can obviously do it this way (Prototypejs selector):
var autofocusElement = $$('input[autofocus]')[0];
callListener(autofocusElement);
But it looks ugly compared to only add an event listener.
Edit:
Do not worry over a lack of browser support for the autofocus attribute. It solved easily as I have done in I fiddle links to below. There is also the best solution to the problem as I can see. My question is if I can do it in a less ugly than having to call the listener manually.
http://jsfiddle.net/tellnes/7TMBJ/3/
It works fine in Firefox 3.6 since Firefox does not support autofocus. But in Safari, which supports autofocus, are not the event called.
From the HTML5 working draft:
There must not be more than one
element in the document with the
autofocus attribute specified.
So you're asking for undefined behavior anyway.
With only one autofocus element, under Firefox 3.6, neither of the handlers get called on page load. Manually giving the focus to the element calls both handlers (then proceeds into an infinite loop, due to the alert boxes giving the focus back to the element when closing).
The HTML5 draft does say that autofocus should perform the focusing steps on page load, including raising the focus event, but chances are that browsers are not currently implementing that feature in a complete or consistent manner.
You might want to explicitly call your focus event handler during page load until the HTML5 spec is finished and browsers start aiming for complete support.
The following code from your current example:
<input id="i" type="text" autofocus onfocus="alert(1)">
<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
alert(2);
}, false);
</script>
Is going to cause an infinite loop of alerts going from 1 to 2
[eidt]
because: (this happens only in broswers that support autofocus )
input gets autofocus, fires event which fires an alert, alert grabs focus, click ok, input grabs focus, focus event fires new event triggering now two different alerts (DOM fully loaded now so new event is added with another alert), both alerts grab focus, click ok, click ok, input grabs focus fires new event triggering now two different alerts, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events...
Textual description of an infinite process FTW!....? :P
[/edit]
In your previous examples with two auto-focuses applied it seems that the last one will be executed as in the example I have attached at the bottom. I also added a way of adding a focus event to each input based on a class name... Not sure if you're looking for that but though it might be of some help.
JSFiddle Example of onfocus event
You need to give a value to autofocus.
<input id="i" type="text" onfocus="alert(1)" autofocus="">
Give autofoucs="autofocus" attribute after all events has been given to the input field.
You can also use addEventListener in .js file at the top.
It might be that the autofocus onfocus event fires before addEventListener adds the event listener.
I replaced autofocus with class="autofocus" on my input element, and set the focus like this near my addEventListener call:
if(searchInput.classList.contains('autofocus')) {
searchInput.focus();
}
If you need to execute a piece of javascript code, onfocus for either input, you could use jQuery: http://api.jquery.com/focus/

Categories