当使用退格键或删除按钮提交按钮颜色不改变答案

【问题标题】：When use backspace or delete button submit button color not changes当使用退格键或删除按钮提交按钮颜色不改变
【发布时间】：2018-04-11 01:35:53
【问题描述】：

我有一个 HTML 表单，当输入值小于 10 时，提交按钮被禁用。当输入值大于 10 时，按钮改变颜色。

当我使用退格或删除按钮删除输入值时出现问题，提交按钮颜色不会更改为禁用按钮，直到我刷新页面。

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
  }
}, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

【问题讨论】：

你的做法完全不对……

标签： javascript jquery html css

【解决方案1】：

一旦值达到 10，您就更改颜色，但您永远不会将它们改回来。您可以将它们设置为空字符串 ("") 以在设置它们之前恢复为原始颜色。（见jQuery - remove style added with .css() function）。

下面的固定代码：

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
    // Remove the custom colors we added.
    $('#submit').css({"background-color": "", "color": ""});
  }
}, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

（请注意，正如其他人指出的那样，最好监视input 的变化，而不是使用计时器。）

【讨论】：

@pedram 这就是我在上一段中所指的内容。
setInterval 只会使用更多资源。相反，您只能在事件发生时触发事件处理程序，如下所述。

【解决方案2】：

给你一个解决方案

$('#tot2').keyup(function(){
  if(parseInt($(this).val()) < 10 || $(this).val().length  === 0) {
    $('#submit')
      .attr('disabled', 'disabled')
      .removeClass('active');
  } else {
    $('#submit')
      .removeAttr('disabled')
      .addClass('active');
  }
});

.active {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

【讨论】：

【解决方案3】：

尝试 keyup 事件。使用类进行样式设置并切换它。

 $("#tot2").on("keyup", function() {
    var elem = $(this);
    if (elem.val() >= 10) {
        $("#submit").removeAttr("disabled").addClass("active");
    } else {
        $("#submit").attr("disabled", "disabled").removeClass("active");
    }
});

CSS：

active {
        background-color: blue;
        color: white
    }

演示：http://jsfiddle.net/GCu2D/2207/

【讨论】：

【解决方案4】：

您应该使用keyup 或keypress 函数，而不是设置内联样式使用addClass，如下所示：

$('#tot2').keyup(function() {
  var val = $(this).val();
  if (val >= 10) {
    $("#submit").removeAttr("disabled");
    $("#submit").addClass('NewSub');
  } else {
    $("#submit").attr("disabled", "disabled");
    $("#submit").removeClass('NewSub');  
  }
});

.NewSub {
background: blue;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post">
  <input type="text" name="balance" id="tot2" value="" />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

【讨论】：

【解决方案5】：

除了使用时间interval，你可以简单地这样做：

$('#tot2').on('change', function(){
  if($('#tot2').val() < 10) 
    $('#submit').attr('disabled', 'disabled');
  else  $('#submit').removeAttr('disabled');
});

【讨论】：