javascript - 如果 Inputs 上有值，则移除 Disable 属性

Question

我有一个输入和提交按钮

<input type="text" name="firstName"  placeholder="Michael">
<button type="button" class="update-change" disabled="disabled">Save</button>

我希望当有人将焦点放在输入上时，按钮将处于事件状态。所以我用了这个:

$('input[name="firstName"]"]').focus(function() { 
   $(".update-change").removeAttr('disabled');
}).blur(function() {
    $(".update-change").attr('disabled', 'disabled');
});

因此，当任何人点击外部按钮时，它会再次变为禁用状态。到目前为止这很好，但我想要在输入保存按钮上给出值时不会禁用输入之外的点击。但我不知道该怎么做。使用更改功能？

所以要点是:

1. 按钮将首先被禁用。如果点击输入它将是 活跃。
2. 如果输入中没有任何值，则单击外部按钮将被禁用。
3. 但是如果添加了任何值，按钮将保持事件状态。它不会使禁用状态。

JSFIDDLE .

提前致谢。

Answer 1

在您的.blur 函数中，您可以检查它是否为空。如果是，禁用该按钮，否则启用它。如果焦点位于框上，这也将启用该按钮，如果焦点移开且框中未输入任何内容，则禁用该按钮。

$('input[name="firstName"]').focus(function () {
     $(".update-change").removeAttr('disabled');
 }).blur(function () {
     if ($.trim(this.value) == "") {
         $('.update-change').attr("disabled", true);
     } else {
         $('.update-change').removeAttr("disabled");
     }
 });

FIDDLE