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

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

所以要点是：

按钮将首先被禁用。如果单击输入它将是活性。
如果输入中没有值，则单击外部按钮将被禁用。
但如果添加了任何值，按钮将保持活动状态。它不会使禁用状态。

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

Answer 2

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

Answer 3

您可以使用if语句检查输入是否没有任何内容然后您禁用该按钮，否则它将保持启用状态。这是工作demo

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

如果输入上有值，请删除“禁用”属性

3 个答案: