keyup does not read input value

Question

I've noticed that keyUp in JQuery does not read the input value if the user selects an entry that was previously saved before.

For example in the image below...

If the user picks the previously saved entry, then my keyUp function will only read up to 13 in the image above, instead of 13eb@queensu.ca. keyUp will only work if the user enters every character of the email manually. How can I fix this issue?

That makes sense, right? If there would be two items starting with 13, which one should be selected? Typing the text limits the list, and after that you should be able to use arrows (or mouse) to navigate to the right item. That's how a dropdown usually works.. — GolezTrol, Feb 29 '16 at 05:16
btw just suggestion why you dont use `change keyup mousedown` for more event trigger if `keyup` failed to trigger. — mmativ, Feb 29 '16 at 05:17
Possible duplicate of [textbox browser autocompletion options do not fire keypress/keyup](http://stackoverflow.com/questions/9531612/textbox-browser-autocompletion-options-do-not-fire-keypress-keyup) — Anthony, Feb 29 '16 at 05:18
@mmativ thats exactly what I needed, I had no idea you could combine them — buydadip, Feb 29 '16 at 05:19
Also take a look at : http://stackoverflow.com/questions/30646453/browser-autocomplete-not-allowing-copy-keyup-function-to-work I actually like your version of this question over earlier versions because it's direct and simple and doesn't imply that this is a browser bug. But it's been discussed here and elsewhere since at least 2009. So change/blur is probably your best best — Anthony, Feb 29 '16 at 05:23
@mmativ - does this also cover mobile (touch based) browsers without requiring blur? — Anthony, Feb 29 '16 at 05:24
im not sure if all cover the touch event, but you can add `touchstart` so can trigger in mobile. — mmativ, Feb 29 '16 at 05:33
Also, apparently many browsers will trigger an `input ` event when an autofill selection is made, which occurs while the input is still in focus. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput — Anthony, Feb 29 '16 at 06:02
Yep, appears to work in Chrome as tested in this fiddle: https://jsfiddle.net/q6doxbur/ — Anthony, Feb 29 '16 at 06:28

score 2 · Accepted Answer · answered Feb 29 '16 at 05:22

2

you can combine using this.

$('#text').on('change keyup mousedown',function(){
alert("1");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="text"/>

answered Feb 29 '16 at 05:22

mmativ

1,414
14
25

Sarhanis · Answer 2 · 2016-02-29T05:22:33.150

1

I'm not sure you can fix the issue solely with keyup... however, you could use a combination of events and bind them to the control.

Here's an example. Update as you see fit for your particular situation.

var counter = 0;
$("#myId").bind("keyup change paste input propertychange mousedown", function(event) {
  counter++;
  $("p").text(counter + ": " + event.type);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myId">
<p></p>

edited Feb 29 '16 at 05:22

answered Feb 29 '16 at 05:12

Sarhanis

1,577
1
12
19

The gotcha is that change only fires on blur. – Eric Guan Feb 29 '16 at 05:14
1

You can also use the `input` event. https://developer.mozilla.org/en-US/docs/Web/Events/input – idan Feb 29 '16 at 05:19

score 1 · Answer 3 · answered Feb 29 '16 at 06:44

You can bind/listen for input events, which all the major browsers have some level of support for in their supported versions. Example with jquery:

$("#search").on("input", function() {
  console.log($(this).val());
});

will fire for changes to the targeted input element occurring while the input is still in focus (so not after the input loses focus, like a change event), such as:

the user typing input,
the input updating when using a browser-driven "autofill",
the user pasting text into the input using system clipboard

Be sure to review any browser-specific quirks in support, specifically IE9 not firing this event when users delete already-input characters (such as when using delete key or backspace key or "cut").

Simple, working Fiddle example:

https://jsfiddle.net/q6doxbur/2/

keyup does not read input value

3 Answers3