Javascript onChange arrow keys

Question

Ok, so we all know that onChange is used to execute javascript code in the select statement when changing a parameter. However, if you modify the select statement using the arrow keys, the onChange event is not raised. Is there any way around this? Please help! I am OCD, I know.

- EDIT 1 -

Just test this in IE and the arrow keys work. Apparently this is just Chrome. ** Going to check firefox

- Change 2 -

Tested in Firefox and implemented just before the onBlur action, which is required for the change, is described below. So the answer is here:

Internet Explorer recognizes event events from the keyboard and also clicks on them. Firefox and Chrome require key events followed by a blur event to trigger onChange.

Now, as a rule, I do not like Internet Explorer because it is a piece of garbage ... But I think that I ... unfortunately, I have to say that they got this right.

My understanding of the causes of blurring on chrome and firefox is saving resources, but I do not agree with that. I feel this should follow a literal interpretation of the onChange command ... Sigh ... I suppose I'm probably wrong, though.

Answer 1

Returning to this, it turns out that after asking this question, Chrome now triggers the change after key events. Firefox seems to be still waiting onblur. http://jsfiddle.net/2aQBN/

$(document).ready(function() { $("#test").on("change", function() { console.log("Changed."); }); }); 

The W3C specification suggests using input instead.

When an input event is applied, each time the user invokes an element to change the value, the user agent must queue the task to trigger a simple event, which the bubbles call the input element of the input element.

However, no input event is fired in Chrome or Firefox for the select element. (Input elements only.)

A test showing the current value compared to the last exchange value.

http://jsfiddle.net/teynon/MpyHK/5/

Firefox will change the value of onmouseover. Changing a key will also change the value. However, he did not fire. If the form is submitted when the user opens the selection menu, the currently selected option is displayed.

From W3C:

If the multiple attribute is absent and the element is not disabled, then the user agent must allow the user to select the option element in his list of parameters, which is not disabled by itself. With this option, the element is selected (through a click or through a non-focusing element after changing its value or through a menu command, or through any other mechanism) and before the corresponding user interaction the event is queued (for example, before the click event), the user agent must set the choice the selected option element is true, and then the queue a task launches a simple event that the bubbles with the name change when selected, using the source of the user interaction task as the source for Achi.

The https://bugzilla.mozilla.org/show_bug.cgi?id=126379 section discusses a long time when many people ask to use the arrow keys. (And some advocate an onchange approach.)

Some users have suggested that W3C is wrong in the specification for the select element change event. Instead, we suggest modifying the specification of how we expect the select onchange functionality to work.

The current functionality is clearly not intuitive for a large number of people based solely on the number of error reports. (Mozilla has 40 marked as duplicates.)

Answer 2

I would advise you to write the required code in the Key Up event to capture the key press, and also check the Key Code. Hope this helps

Answer 3

Scrolling the selection window is not considered a change. The change occurs when you blur () the selection and the new parameter value is applied to the select element.

Answer 4

This is a pretty dirty hack, but you can get the change event to fire by doing the following:

 element.addEventListener('keyup', function(evt){ evt.target.blur(); evt.target.focus(); }, false); 

So, you would register an event listener for change , and this function is called when the user presses the <select> key through the code above.

You may want to cover this only for Firefox, but AFAIK you will need to use the UA nuances for this to be up to you, if that is acceptable.

A source

Answer 5

I am thinking of something like this (so as not to fire the event if the value has not been changed):

  select.keydown(function(){ var _this = $(this); var _val = $(this).val(); setTimeout(function(){ if(_this.val() !== _val){ _this.trigger("change"); } }, 1); });