如何在Javascript或Jquery中将侦听器设置为“ backspace press”事件？

Question

I have a button that is enabled or disabled if, respectively, there is or is not text inside an input, as shown in the code snippet below:

var input = document.getElementById('myInput');
var btn = document.getElementById('myButton');

$(input).on('keyup', function(){
  if((input.value != null) && (input.value != ''))
    $(btn).removeClass('btnDisabled');
  else
    $(btn).addClass('btnDisabled');
});

Using keyup event it is working good in my aplication on an smarthphone with Android 6.0.1. But for some reason, on an tablet with Android 4.4.2 if backspace key are pressed till the begin of input, erasing all the text value, the button is still enabled. I researched this problem but I'm still not sure if the WebView version interferes with this. I think so.

I used other code snippets to see if the event is triggered by the "backspace" button, as shown below:

  $(input).on('keydown', function(event){ //I tried keyup, keydown and keypress
      var key = event.keyCode || event.charCode;

      console.log("keydown " + key, "length " + input.value.length);
      //if(key == 8 && input.value.length == 1) $(btn).addClass('btnDisabled');
    });

With this test I saw that the backspace does not trigger the event and the variable key is always equal to 0.

I need to disable the button when input is empty. Where am I going wrong?

Right now, I thank those who help! :D

Answer 1

There is another event that you can use: input

https://developer.mozilla.org/en-US/docs/Web/Events/input

The DOM input event is fired synchronously when the value of an <input> , <select> , or <textarea> element is changed.

In this case, change

$(input).on('keydown', 

to

$(input).on('input', 

See also: https://caniuse.com/#search=input