当输入字段有值时，从提交按钮中动态删除禁用值

Question

我有这个有效的表格。除非在 input 字段中输入 16 位数字，否则我无法单击提交按钮。问题是只有在我点击输入字段之外时才能点击提交。

我希望当用户输入最后一位数字时，“已禁用”将自动删除，而无需先在输入字段之外单击。我怎样才能做到这一点？

<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
    <div class="form">
        <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number"  onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
        <div class="notice"><span></span></div>
</div>
<input type="submit" value="ORDER" class="button" />
    </div>
</form>
<script>
var $j = jQuery.noConflict();

$j(function(){

$j(document).ready(function (){
    validate();
    $j('#inputNumber').change(validate);
    $j('.notice span').text('');
});

function validate(){
    if ($j('#inputNumber').val().length == 16) {
        $j("input[type=submit]").prop("disabled", false);
        $j("input[type=submit]").addClass("disabled-off");
        $j("input[type=submit]").removeClass("disabled-on disabled-colour");
        $j('.notice span').text('');
    }
    else {
        $j("input[type=submit]").prop("disabled", true);
        $j("input[type=submit]").addClass("disabled-on disabled-colour");
        $j("input[type=submit]").removeClass("disabled-off");
        $j('.notice span').text('More numbers is needed');
    }
}
});
</script>

问候约翰

Answer 1

您可以在change 监听器上使用input 监听器：

$j('#inputNumber').on('input', validate);

（请注意，您有一个额外的结束</div>） 请参阅下面的演示：

var $j = jQuery.noConflict();

$j(function() {

  $j(document).ready(function() {
    validate();
    $j('#inputNumber').on('input', validate);
    $j('.notice span').text('');
  });

  function validate() {
    if ($j('#inputNumber').val().length == 16) {
      $j("input[type=submit]").prop("disabled", false);
      $j("input[type=submit]").addClass("disabled-off");
      $j("input[type=submit]").removeClass("disabled-on disabled-colour");
      $j('.notice span').text('');
    } else {
      $j("input[type=submit]").prop("disabled", true);
      $j("input[type=submit]").addClass("disabled-on disabled-colour");
      $j("input[type=submit]").removeClass("disabled-off");
      $j('.notice span').text('More numbers is needed');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" name="verify" method="post" action="https://something.com">
  <div class="form">
    <input id="inputNumber" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="16" name="number" value="Fyll in number" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"
    />
    <div class="notice"><span></span></div>
  <!--</div>-->
  <input type="submit" value="ORDER" class="button"/>
  </div>
</form>