logo标签列表

只允许在文本框中输入数字以及使用Ctrl+A、Ctrl+V、Ctrl+C键。

javascriptjqueryregexkeycode
19


我希望让用户只能输入数字，还可以复制和粘贴内容到文本框。我已经实现了限制用户只能输入数字，但是复制和粘贴功能无法使用，请帮我解决这个问题。

以下是我的脚本：

$(".allow_only_numbers").keydown(function (e) {
    var ctrlDown = false;
    var ctrlKey = 17, vKey = 86, cKey = 67;
    if (e.keyCode === ctrlKey){
        ctrlDown = true;
    }
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            // Allow: Ctrl
        (e.keyCode === ctrlKey) ||
            // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
            // Allow: Ctrl+v
        (e.keyCode === vKey && ctrlDown) ||
            // Allow: Ctrl+c
        (e.keyCode === cKey && ctrlDown) ||
            // 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();
    }
});

以下是 jsfiddle 链接：

https://jsfiddle.net/sureshpattu/stwzhceL/1/

你不能将类型设置为数字吗？<input type="number" name="quantity" min="1" max="5">？ - guradio
@Pekka 我能够限制用户只输入数字，但是复制、粘贴对我来说不起作用。 - Suresh Pattu
现代浏览器可以使用 input 事件来处理粘贴和键盘事件。IE9部分支持，IE8完全不支持。 - charlietfl
@SureshPattu 你试过我的答案了吗？ - John R
@JohnR 是的，我试过了，很好用，非常感谢 :) - Suresh Pattu
8个回答
27

试着这样使用 event.keyCode 和 event.metaKey。

$(document).ready(function() {
  $(".allow_only_numbers").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A
      ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (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();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="number" class="allow_only_numbers" />

编辑:

从您的代码中删除以下代码片段。

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;
if (e.keyCode === ctrlKey) {
    ctrlDown = true;
}

因为在按下 C 和 V 进行复制和粘贴时，ctrlDown 将变为 false。因此你的 ctr+c 和 ctrl+v 不起作用。

可能不应该使用metaKey。 "警告：至少在Firefox 48版本中，⊞ Windows键不再被视为“Meta”键。当按下⊞ Windows键时，KeyboardEvent.metaKey为false。" -https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey。另外，您应该使用KeyboardEvent.code或key。keyCode已被弃用。 - Gregory Bologna
9

$(".allow_only_numbers").on("input",function (e) {
  e.target.value = e.target.value.replace(/[^0-9]/g,'')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="allow_only_numbers" />

1
被低估了。干净的解决方案，无需列出一堆关键代码和ctrl键组合。谢谢。 - Ishmaeel
1
我没有为IE8设置验证，但有一个SO答案说你可以使用on('propertychange input')而不是仅使用on('input')。https://dev59.com/r3fZa4cB1Zd3GeqPTI8S - Shanimal
到目前为止，我发现这是最好的解决方案！+1 - Andrew Magill
3
$(".allow_only_numbers").keydown(function (e) {
        var isModifierkeyPressed = (e.metaKey || e.ctrlKey || e.shiftKey);
        var isCursorMoveOrDeleteAction = ([46,8,37,38,39,40].indexOf(e.keyCode) != -1);
        var isNumKeyPressed = (e.keyCode >= 48 && e.keyCode <= 58) || (e.keyCode >=96 && e.keyCode <= 105);
        var vKey = 86, cKey = 67,aKey = 65;
        switch(true){
            case isCursorMoveOrDeleteAction:
            case isModifierkeyPressed == false && isNumKeyPressed:
            case (e.metaKey || e.ctrlKey) && ([vKey,cKey,aKey].indexOf(e.keyCode) != -1):
                break;
            default:
                e.preventDefault();
        }
});

这是一个工作示例：

https://jsfiddle.net/stwzhceL/8/

该代码允许您使用 ctrl+a，ctrl+c 和 ctrl+v，以及箭头键、删除键和退格键。

此外，此代码还适用于 macOS。（使用 cmd+a/cmd+c/cmd+v）

好的解决方案，比约翰R.的答案更易读，尽管本质上是相同的东西。 - rkd
1

以下是@Shanimal的答案。这是我的AngularJS指令，用于在输入框中只接受数字。

.directive('onlyNumber', function() {
        return  {
            restrict: 'A',
            link: function (scope, elm, attrs, ctrl) {
                elm.on("propertychange input",function (event) {
                    event.target.value = event.target.value.replace(/[^0-9]/g,'');
                });
            }
        };
    })

只需在您的元素中使用“only-number”。 例如：

<input type="text" data-ng-model="number" placeholder="number"id="cifNumber" only-number/>
感谢提及。 - Shanimal
1
$('.numericOnly').on('keydown keyup', function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A
        ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (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();
    }
    //Ensure that bulk number pasted is numeric only
    let n = $(this).val()
    if (!isNaN(parseFloat(n)) && isFinite(n)) {
    } else {
        $(this).val("")
    }
})
0
如果你将你的 keydown 事件改为 keyup 事件，你就可以使用 e.ctrlKey，当按下 ctrl 键时它将会是 true。
0
function numbersonly(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
-1

这应该能给你一个想法。抱歉，我在使用Mac电脑，据我所知，e.ctrlKey等类似的功能在Mac上无法使用。

var mod;

var ouput = jQuery('#output');


var numeric = jQuery('#numeric').keydown(function(e){
  mod = e.which;
  
  if(!(e.which >= 48 && e.which <= 57) && (e.which != 8)
  && (mod && (e.which == 67 || e.which != 86))){
      e.preventDefault();
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='numeric'/>

<label id='output'></label>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接