Question

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

这种方法工作正常，但对于一个值，它将失败

就像在文本框中输入1

一样

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>

Answer 1

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

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

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

Fiddle

Answer 2

keypress事件发生在浏览器处理密钥之前，即在将字符附加到输入值之前，因此当按下第一个键时，当函数检查值长度时，文本框仍为空。

在浏览器将字符附加到输入后发生keyup事件，因此如果您在keyup而非keypress上触发，则代码应按您希望的方式运行。

Answer 3

我建议：

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

Answer 4

正如其他答案所述，你应该使用keyup，但你也不需要听模糊：

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

Fiddle

按下按钮上的启用按钮

4 个答案: