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

Posted 2023-02-22

【中文标题】当使用退格键或删除按钮提交按钮颜色不改变

【英文标题】：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>

【问题讨论】：

你的做法完全不对……

【参考方案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');
);