禁用启用按钮上的按键

disable enable button on keypress

本文关键字：按钮 启用      更新时间：2023-09-26

我想在文本框中有一些值时启用按钮

这在大多数情况下工作良好，但对于一个值，它将失败

类似于在文本框

中输入1http://jsfiddle.net/akash4pj/YhQN4/

js 

<script>
$(document).ready(function(){
$("#textbx").keypress(function(){
 if ($("#textbx").val().length > 0) {
      $("#btn").removeAttr('disabled');
   }
});
 $("#textbx").blur(function(){
    if ($("#textbx").val().length ==0) {
      $("#btn").attr('disabled','disabled');
   }
  });
});
</script>

html代码

 <input id="textbx" type="text" /><button id="btn" disabled="disabled">go</button>

使用keyup代替keypress，如下所示:

$("#textbx").blur(function () {
    if ($("#textbx").val().replace(/'s{1,}/g, "").length == 0) {
        $("#btn").attr('disabled', 'disabled');
    }
});

另外，我也在代码中添加了.replace(/'s{1,}/g, "")。这确保了(间接地)如果用户只输入空格，当文本输入模糊时，按钮仍将被禁用。

小提琴。

keypress事件发生在浏览器处理键之前，即在字符被附加到输入值之前，所以当第一个键被按下时，当你的函数检查值长度时文本框仍然是空的。

keyup事件发生在浏览器将字符追加到输入之后，所以如果您触发keyup而不是keypress，您的代码应该按您想要的方式运行。

我建议:

$("#textbx").on('keyup blur', function() {
    $("#btn").prop('disabled', $.trim(this.value).length === 0);
});

正如在其他答案中提到的，你应该使用keyup，但你不需要同时监听blur:

 $("#textbx").keyup(function(){   
    if ($("#textbx").val().trim().length > 0) {
      $("#btn").removeAttr('disabled');
    }
    else
      $("#btn").attr('disabled','disabled');
 });

小提琴

相关文章：