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

Question

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

 $(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" /> 

我究竟做错了什么？ 还有其他方法可以做到这一点吗？

Answer 1

更换

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

通过

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

毕竟，您需要检查已按下哪个键， 然后才能在该字段中键入字符。

另外，请确保没有阻止退格键和删除键以及箭头键！

 $(function() { var regExp = /[az]/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; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="test" name="test" /> 

如果您的目标是仅接受数字，点和逗号，请改用以下功能：

 $(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; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="test" name="test" /> 

Answer 2

您需要将输入数据存储在某个位置，并在用户每次输入允许的字符时进行更新，或者在禁用时重置

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

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

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

    // Do not allow alphabets to be entered.
    if (regExp.test(value)) {
        $(this).val(inputVal)
    }
    else{ 
        inputVal = value
    }

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

}); // End of 'document ready'

Answer 3

创建一个将其掩盖的功能

的jsfiddle

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

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

Answer 4

如果您只尝试带空格的字母，则可以尝试：

$("#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();
    }
 });

Answer 5

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

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