jQuery 按键功能无法正常工作

Question

我正在对 UI 进行一些更改，如果用户 select 从下拉列表发送 TX，那么文本框应该只接受最多 10 个字符的数字，否则如果用户 select NY 那么用户可以输入最多 15 个字符的字母数字，代码仅在第一次运行良好。然后对于任何 selection，文本框只接受数字（不考虑 selection）。 JSfiddle link 如下：

https://jsfiddle.net/narendrak/t9n9hbgc/1/

代码片段如下：

  <input type="text" tabindex="7" maxlength="10" size="18" name="stateinfo"      id="stateinfo" style="text-transform: uppercase;" value="" disabled />
    <select name="states" id="states" value="State">  
    <option value="State">State</option>
    <option value="NY">NY</option>
    <option value="TX">TX</option>
    </select>

JS代码：

$(document).ready(function() {
  $('#states').change(function() {
    var dropdown = $("#states").val();
    if (dropdown == "State") {
      $("#stateinfo").val("");
      $("#stateinfo").attr('disabled', 'disabled');
    } else if (dropdown == "TX") {
        $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[0-9]+$");
        var num = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(num)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "10");
    } else {
      $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "15");
    }
  });
});

感谢任何帮助。

Answer 1

你只需要取消绑定一个处理程序

 $(document).ready(function() {
  $('#states').change(function() {

    $( "#stateinfo").unbind( "keypress" );

    var dropdown = $("#states").val();
    if (dropdown == "State") {
      $("#stateinfo").val("");
      $("#stateinfo").attr('disabled', 'disabled');
    } else if (dropdown == "TX") {
        $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[0-9]+$");
        var num = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(num)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "10");
    } else {
      $('#stateinfo').keypress(function(e) {
        var regex = new RegExp("^[a-zA-Z0-9]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
          return true;
        }
        e.preventDefault();
        return false;
      });
      $("#stateinfo").removeAttr('disabled');
      $("#stateinfo").val("");
      $("#stateinfo").attr("maxlength", "15");
    }
  });
});

jQuery 按键功能无法正常工作

jQuery keypress function not working properly

javascript

jquery

user-interface

closures

jquery-events