jQuery不允许在输入字段中输入字母

时间:2015-09-10 06:43:09

标签: javascript jquery jquery-events

我的要求是不允许用户输入任何字母表。下面的代码允许输入1个字符,即使我在e.preventDefault()keydown方法上都提供了keyup方法。



$(function() {
  // Regular Expression to Check for Alphabets.
  var regExp = new RegExp('[a-zA-Z]');

  $('#test').on('keydown keyup', function(e) {

    var value = $(this).val();

    // Do not allow alphabets to be entered.
    if (regExp.test(value)) {
      e.preventDefault();
      return false;
    }

  }); // End of 'keydown keyup' method.

}); // End of 'document ready'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />
&#13;
&#13;
&#13;

我做错了什么?还有其他方法可以完成这项工作吗?

4 个答案:

答案 0 :(得分:3)

替换

var value = $(this).val();

通过

var value = String.fromCharCode(e.which) || e.key;

毕竟,您需要在之前检查已按下哪个键允许在字段中输入字符。

另外,请确保不阻止退格键和删除按钮和箭头键!

&#13;
&#13;
$(function() {
  var regExp = /[a-z]/i;
  $('#test').on('keydown keyup', function(e) {
    var value = String.fromCharCode(e.which) || e.key;

    // No letters
    if (regExp.test(value)) {
      e.preventDefault();
      return false;
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />
&#13;
&#13;
&#13;

如果您的目标是只接受数字,则点和逗号使用此功能:

&#13;
&#13;
$(function() {
  var regExp = /[0-9\.\,]/;
  $('#test').on('keydown keyup', function(e) {
    var value = String.fromCharCode(e.which) || e.key;
    console.log(e);
    // Only numbers, dots and commas
    if (!regExp.test(value)
      && e.which != 188 // ,
      && e.which != 190 // .
      && e.which != 8   // backspace
      && e.which != 46  // delete
      && (e.which < 37  // arrow keys
        || e.which > 40)) {
          e.preventDefault();
          return false;
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test" name="test" />
&#13;
&#13;
&#13;

答案 1 :(得分:1)

创建一个掩盖它的函数

jsfiddle

$.fn.noMask = function(regex) { 
  this.on("keypress", function(e) {
    if (regex.test(String.fromCharCode(e.which))) {
        return false;
    }
  });
}

$("input").noMask ( /[a-zA-Z]/ );

答案 2 :(得分:0)

如果您只尝试使用带空格的字母,则可以尝试:

$("#test").on("keypress keyup blur",function (event) { 

 $(this).val($(this).val().replace(/[^a-zA-Z ]/, ""));

if (!((event.charCode > 64 && 
    event.charCode < 91) || event.charCode ==32 || (event.charCode > 96 && 
      event.charCode < 123))) {
      event.preventDefault();
    }
 });

答案 3 :(得分:0)

此代码将仅允许输入数字,例如在电话号码输入字段中。这是对可接受答案的改进。

var regExp = /[0-9]/;
      $("#test").on('keydown keyup blur focus', function(e) {

        var value =e.key;
        /*var ascii=value.charCodeAt(0);
        $('textarea').append(ascii);
        $('textarea').append(value);
        console.log(e);*/
        // Only numbers
        if (!regExp.test(value)
          && e.which != 8   // backspace
          && e.which != 46  // delete
          && (e.which < 37  // arrow keys
            || e.which > 40)) {
              e.preventDefault();
              return false;
        }
      });