Question

我使用这个jQuery代码只允许在输入文本字段中输入数字。

jQuery(document).ready(function() {     
    jQuery( '.only_numbers' ).keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            ((e.keyCode === 65) && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

除了一个小问题外，这个工作正常。它不允许在现场粘贴任何东西。如果字符串包含所有数字字符，我如何允许用户在字段中粘贴字符串？

此外，如果我可以对仅允许字母的输入文本字段执行相同操作，那将会非常棒。

Answer 1

您的HTML

 <input type='text' />

你的Jquery

 $('input').on('paste', function (event) {
  if (event.originalEvent.clipboardData.getData('Text').match(/[^\d]/)) {
    event.preventDefault();
  }
});

$("input").on("keypress",function(event){
                if(event.which <= 48 || event.which >=57){
                    return false;
                }
            });

工作代码 https://codepen.io/anon/pen/pwEXyg

Answer 2

您可以使用正则表达式来实现此目的。

仅限数字。

＆＃13;

function process(input){
  let value = input.value;
  let numbers = value.replace(/[^0-9]/g, "");
  input.value = numbers;
}

＆＃13;

<input type="text" oninput="process(this)">

＆＃13;

仅限信件。

＆＃13;

function process(input){
  let value = input.value;
  let numbers = value.replace(/[0-9]/g, "");
  input.value = numbers;
}

＆＃13;

<input type="text" oninput="process(this)">

＆＃13;

Answer 3

你为什么要这么复杂。你可以输入type='number'，这样就可以达到你不需要jQuery的目的。它不会允许除e以外的字母表用于指数数字，当您将粘贴复制到此时，它只会将复制的字符串中的数字粘贴到文本框中，并且e也是如此。

以下是仅允许文本框中的字母表的代码。以及仅允许type=text。

的文本框中的数字的代码

＆＃13;

function onlyAlphabets(event) {
  //allows only alphabets in a textbox
  if (event.type == "paste") {
    var clipboardData = event.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    if (isNaN(pastedData)) {
      return;

    } else {
      event.prevetDefault();
    }
  }
  var charCode = event.which;
  if (!(charCode >= 65 && charCode <= 120) && (charCode != 32 && charCode != 0) && charCode != 8 && (event.keyCode >= 96 && event.keyCode <= 105)) {
    event.preventDefault();
  }
}

function onlyNumbers(event) {
  if (event.type == "paste") {
    var clipboardData = event.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
    if (isNaN(pastedData)) {
      event.preventDefault();

    } else {
      return;
    }
  }
  var keyCode = event.keyCode || event.which;
  if (keyCode >= 96 && keyCode <= 105) {
    // Numpad keys
    keyCode -= 48;
  }
  var charValue = String.fromCharCode(keyCode);
  if (isNaN(parseInt(charValue)) && event.keyCode != 8) {
    event.preventDefault();
  }
}

＆＃13;

Number Only With Type=Number:
<input type="number" name="quantity" min="1" max="5">
<br> Number Only With Type=Text:
<input type="text" name="quantity" min="1" max="5" onkeydown="onlyNumbers(event)" onpaste="onlyNumbers(event)">
<br>Aplhabets Only:
<input type="text" onkeydown="onlyAlphabets(event)" onpaste="onlyAlphabets(event)"/>

＆＃13;

<强>更新

添加了代码，仅允许输入type=text中的数字。并且还可以在Firefox和IE中使用

希望有所帮助：）

Answer 4

如果你想通过跳过JS来做到这一点，你可以设置输入类型=＆＃34;数字＆＃34;。虽然它对字母表不起作用......

Answer 5

试试这个，它会限制输入字母，也不会让你粘贴它。

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

func2

Answer 6

这是我的解决方案，它比JS更快。

<input type="text" pattern="[\d+\t.]+" formnovalidate="false"/>

Answer 7

实际上，你只需要一个＆＃34;模式＆＃34;属性。

<input type="text" pattern="[\d\t.]+" formnovalidate="false "/>

Answer 8

使用键盘事件限制其他键

//numbers, delete, backspace, arrows        
var validKeyCodes = [8, 9, 37, 38, 39, 40, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
        $("Selectors").on("keydown", function (e) {
            if (!($.inarray(e.keycode, validkeycodes) >= 0))
                e.preventDefault();
        });

如何使用jQuery仅允许输入文本字段中的数字（即使在复制粘贴时）？

8 个答案: