限制粘贴的输入只能是数字

Question

我有一个输入框，它有一个名为 restrict-numbers 的类，我希望限制输入的字符只能接受数字，我使用了下面的代码，这很好，但问题是我想使相同的限制在不完全禁用粘贴的情况下也适用于粘贴到输入框中：

function input_only_numbers(){
$("input[type=text]").each(function(){
if( $(this).hasClass("restrict-numbers") ){    
    $(this).keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 

        // Allow: Ctrl+A
    (event.keyCode == 65 && event.ctrlKey === true) ||

        // Allow: Ctrl+V
    (event.ctrlKey == true && (event.which == '118' || event.which == '86')) ||

        // Allow: Ctrl+c
    (event.ctrlKey == true && (event.which == '99' || event.which == '67')) ||

        // Allow: Ctrl+x
    (event.ctrlKey == true && (event.which == '120' || event.which == '88')) ||

        // Allow: home, end, left, right
    (event.keyCode >= 35 && event.keyCode <= 39)) {
    // let it happen, don't do anything
        return;
    }
    else {
    // Ensure that it is a number and stop the keypress
        if ( event.shiftKey|| (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ) ){
        event.preventDefault(); 
        }
    }
    });
}




});

}

- TSL

---

您可以使用jQuery表单验证插件来执行此类任务。http://jqueryvalidation.org/documentation/ - DevlshOne

可能是[如何使用jQuery允许在HTML输入框中仅输入数字（0-9）？]（https://dev59.com/eHNA5IYBdhLWcg3wWseK）的重复问题。 - emkey08

Answer 1

$(".numbersOnly").bind('paste', function(e) {
        var self = this;
        setTimeout(function(e) {
            var val = $(self).val();
            if (val != '0') {
                var regx = new RegExp(/^[0-9]+$/);
                if (!regx.test(val)) {
                    $(".numbersOnly").val("");
                }
                $(this).val(val);
            }
        }, 0);
    });

- Abhilash Sringar

---

完美的Jquery代码。对我来说运行良好。 - LOKI

为什么要使用setTimeout？ - R.Akhlaghi

Answer 2

使用 jquery.numeric 插件实现您的表单。

$(document).ready(function(){
    $(".numeric").numeric();
});

此外，这也适用于文本区域！

或者更好的做法是在用户尝试提交时更改输入内容。

$('form').submit(function () {
    if ($('#numeric').value != $('#numeric').value.replace(/[^0-9\.]/g, '')) {
       $('#numeric').value = $('#numeric').value.replace(/[^0-9\.]/g, '');
    }
});

您正在做的是，想要删除数字以外的字符，那么为什么不直接在最后删除呢？

这里有一个我最喜欢的选项，

尝试使用HTML5的数字输入：

<input type="number" value="0" min="0"> 

对于不兼容的浏览器，可以使用Modernizr和Webforms2回退方案。

或者

您也可以将“粘贴”操作绑定到一个函数中，

$( "#input" ).on("paste", function() {
    if ($('"#input').val() != $('"#input').val().replace(/[^\d\.]/g,"")) 
    { $('"#input').val($('"#input').val().replace(/[^\d\.]/g,""));
    }
});

- Optimus Prime

---

谢谢，我使用了插件。我搜索了它，因为链接无法工作 :D - TSL

Answer 3

也许如果你不控制用户实际按下的键，而是控制输入字段的内容，那么你可以减少自己的工作量？你仍然可以使用keyup事件，但是，你应该查看当前输入字段的内容（$(this).val()）并在其上应用适当的正则表达式，而不是检查keycode。

这样，用户可以按照任何喜欢的方式工作，但是你仍然可以对你允许的内容进行完全控制，而不会使它变得太复杂！ 编辑（回答评论）：

Optimus Prime已经提供了一些非常有用的代码，我的版本可能是这样的。

$( "input[type=text]" ).on("keyup", function() {
  var o,v=(o=$(this)).val();
  o.val(v.replace(/[^\d]/g,""));
});

正则表达式还有一些粗糙的地方。请在这里随意改进: http://jsfiddle.net/zWDGS/ （或者这个版本：http://jsfiddle.net/zWDGS/1/）。

- Carsten Massmann

---

你能给我提供一个例子吗？ - TSL

Answer 4

另一个实现表单的插件是jquery.autonumeric。

jQuery(function($) {
      $('#someID_defaults').autoNumeric('init');    
  });

- ceospina

Answer 5

这段代码是用于 JavaScript 并在我的 Angular 应用程序中使用。

jQuery('#Id').on('paste keyup', function(e){
    jQuery(this).val(document.getElementById('Id').value.replace(/[^\d]/g, ''));
  });

其中Id是输入框的id，它被阻止输入字母或粘贴到该字段中。

- ajay hariyal

Answer 6

实际上，对于jQuery来说，它必须是这样的;

$('.just_numbers').on('paste keyup', function(e){ $(this).val($(this).val().replace(/[^\d]/g, '')); });

同时支持粘贴和按键输入，忽略除数字外的所有内容。

- Metin Erbek

Answer 7

$(document).ready(function() 
{
    $("#test").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                // Allow: Ctrl+V
                (event.ctrlKey == true && (event.which == '118' || event.which == '86')) ||  
                // Allow: Ctrl+c
                (event.ctrlKey == true && (event.which == '99' || event.which == '67')) || 
                // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

以上代码可以很好地限制数字输入，不允许输入字符，同时也支持粘贴数字。

- Ravi