仅在粘贴时将输入限制为数字

时间:2013-08-19 10:21:19

标签: jquery restriction

我有一个带有一个名为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(); 
        }
    }
    });
}




});

}

7 个答案:

答案 0 :(得分:2)

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

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

此外,这也适用于textareas!

或者在用户尝试提交时更好地更改输入,

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

这就是你在做什么,你想删除除数字之外的字符,所以为什么要付出这么多努力,只需在最后删除它们。

这是我最喜欢的选项,

尝试HTML5 number输入:

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

对于不合规的浏览器,有ModernizrWebforms2后备。

你也可以将“粘贴”动作绑定到一个函数,

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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

如果您不控制用户按下的实际按键,而不是输入字段的内容,也许您可​​以减少工作量?你仍然可以使用keyup-event,但是,不应该使用keycode,而应该通过在其上应用合适的正则表达式来查看输入字段($(this).val())的当前内容。

这样,用户可以以任何首选方式工作,但您仍然可以完全控制允许的内容,而不会让自己太复杂!

修改(回复评论):

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/)。

答案 3 :(得分:0)

实施表单的其他插件是jquery.autonumeric

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

答案 4 :(得分:0)

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

以上工作正常,因为它限制了数字,它不允许使用字符,您可以粘贴数字

答案 5 :(得分:0)

此代码用于javascript,并在我的角度应用程序中使用。

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

Id是输入字段ID,在输入和粘贴的字段中是受阻止的字母。

答案 6 :(得分:0)

实际上,它必须与jquery一样;

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

也粘贴,也按忽略数字。