Question

我有这个形式有效。除非在input字段中输入16位数字，否则我无法点击提交按钮。问题是，当我点击输入字段外部时，只能点击提交。

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

<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>）见下面的演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

当输入字段具有值时，从提交按钮动态删除disabled-value

1 个答案: