时间戳

首页 > 解决方案 > 如何在 Javascript 或 Jquery 中将侦听器设置为“退格按下”事件？

javascript - 如何在 Javascript 或 Jquery 中将侦听器设置为“退格按下”事件？

问题描述

如果输入中有或没有文本，我有一个启用或禁用的按钮，如下面的代码片段所示：

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');
});

使用 keyup 事件，它在我的 Android 6.0.1 智能手机上的应用程序中运行良好。但由于某种原因，在 Android 4.4.2 的平板电脑上，如果在输入开始之前按下退格键，删除所有文本值，该按钮仍处于启用状态。我研究了这个问题，但我仍然不确定 WebView 版本是否会干扰这个问题。我认同。

我使用了其他代码片段来查看事件是否由“退格”按钮触发，如下图：

  $(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');
    });

通过这个测试，我看到退格键不会触发事件，并且变量key始终等于 0。

当输入为空时，我需要禁用按钮。我哪里错了？

现在，我感谢帮助的人！:D

标签： javascriptandroidjquery

解决方案

您可以使用另一个事件： input

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

<input>DOM 输入事件在、<select>或<textarea>元素的值发生更改时同步触发。

在这种情况下，改变

$(input).on('keydown',

至

$(input).on('input',

另请参阅：https ://caniuse.com/#search=input

推荐阅读