CODEWITHSUNDEEP
javascriptandroidjqueryhtmlgoogle-chrome
Dunge
Dunge

Reputation: 757

Android Chrome only: Changing input val during keyup doesn't apply

Look at this very simple jsfiddle: https://jsfiddle.net/gq9jga4q/33/

<input type="text" id="kbdhook" />

<div id="result" >1: </div>

<div id="result2" >2: </div>

<div id="result3" >3: </div>

$('#kbdhook').keyup(function(event) {
      var current = $('#kbdhook').val();
      if (current !== '' && current !== '\n') {
        var c, l;
        for (l = 0; l < current.length; l++) {
          c = current[l];
          $("#result").html($("#result").html() + c);
        }

        $("#result2").html($("#result2").html() + " " + $('#kbdhook').val());
        $('#kbdhook').val('');
        $("#result3").html($("#result3").html() + " " + $('#kbdhook').val());
      }
  });

My goal is to be able to call a function for every keys typed in an input element.

I'm subscribing to the keyup event and for every letters in it I append them to the document and then clear the text input in order to restart anew the next time.

The #result div is the wanted output that's going to be sent to an external library.

#result2 is used to show that sometimes when you type fast there's multiple letters getting registered in a single keyup event (that's ok).

#result3 is used to show that after clearing the input it is indeed well cleared.

This works perfectly on desktop (IE/Chrome/Firefox) and on iPhone (Safari/Chrome) and also on Android (Firefox). But Chrome on Android give a different behaviour.

Every time the keyup event is triggered, the result of $('#kbdhook').val() is the value as if the "clearing" $('#kbdhook').val(''); would not have happened. But it did, because #result3 is always blank.

Why such a difference in behaviour between the different browsers, and how could I fix my problem?

Upvotes: 2

Views: 1105

Answers (1)

Dunge
Dunge

Reputation: 757

I ended up with a mix of Glauber Borges answer on this thread and mine. I had to use event.preventdefault() in his keydown handler when it was special codes (arrow keys, delete, backspace, return) otherwise it screw his result when the caret is not at the end.

This worked fine for Android Chrome, but then Android Firefox was now the one getting duplicate text. So just like I was doing previously I also added a call to .val(''); to clear after appending the text difference in the input handler and it seems to work on every platforms now.

Google really should create a better standard for text input events, this lack of common behaviour between browsers (and the 229 keycode) is awful.

Upvotes: 1

Related Questions