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

我使用这个jQuery代码，只允许在输入文本字段中输入数字。如何仅使用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(); 
     } 
    }); 
});

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

此外，如果我可以对输入文本字段只允许使用字母表做同样的操作，那将会很棒。

来源

2017-06-15 user1543784

我不想使用，因为在浏览器的兼容性，造型和制作表单字段粘性问题'类型=“数字”'限制其他键。 – user1543784

但它在所有现代浏览器中得到广泛支持。 http://caniuse.com/#feat=input-number – Manish

检查我更新的答案它使用'type = text'验证这两种类型，并且支持IE和Firefox以及其他浏览器。 – Manish

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

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

来源

2017-06-15 04:38:32

这不起作用。这里是[JSFiddle]（https://jsfiddle.net/o465x64d/） – user1543784

user1543784检查这codepen这是兴奋地做你所需要的 https://codepen.io/anon/pen/pwEXyg –

这太棒了！现在试图弄清楚如何改变这个代码以使它适用于字母表。谢谢！ – user1543784

你为什么让事情这么复杂。您只需输入type='number'即可达到您的目的，您不需要使用jQuery。它不会允许指数字除e之外的字母，并且当您将粘贴复制到此时，它只会将复制字符串中的数字粘贴到文本框中，并且也会将其粘贴到e。

下面的代码将只允许在文本框中使用字母。还有只允许type=text的文本框中的数字的代码。

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

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

更新

添加代码，允许在type=text只能输入数字。同时还将在Firefox和IE浏览器以及

希望它能帮助:)

来源

2017-06-15 04:41:29 Manish

这些都不能在Firefox中使用。 – Zze

现在起作用，除非您将不得不再次编辑这个以反映更改，因为现在您不再使用'type =''number''。 – Zze

雅谢谢指出我的坏..：P。 – Manish

如果你想跳过的JS，你可以只设置你的输入类型=“数字”来做到这一点。虽然它不适用于字母表...

来源

2017-06-15 04:41:38 Icewine

试试这个，它会限制打字的字母，并且不会让你粘贴它。

$(document).ready(function(){ 
 
    $("#test").on("keypress",function(event){ 
 
     if(event.which <= 48 || event.which >=57){ 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 
    
 
    $("#test").on("change",function(event){ 
 
     $value = $("#test").val(); 
 
     if(isNaN($value)){ 
 
      $("#test").val(''); 
 
     } 
 
    }); 
 
});

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

来源

2017-06-15 05:19:52

哦，是的！现在，只有当我能够得到与字母完全相同的功能时 - 应该能够输入（包括小写和大写）并粘贴，但是可以防止其他任何内容。 – user1543784

'if（event.which <= 65 || event.which> = 90）'会起作用吗？ – user1543784

是的，它会工作 –

您可以使用正则表达式来实现这一目标。

仅限数字。

只有

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

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

快报。

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

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

来源

2017-06-15 05:43:31 Zze

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

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

来源

2017-06-15 11:09:34

其实，你只需要一个“模式”属性。

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

来源

2017-06-15 11:10:43

如何删除这个多余的答案？ –

点击“删除”下的灰色字母在答案下登录。 – Icewine

@Icewine在哪里？我在android上 –

使用键盘事件

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

来源

2017-07-06 05:55:01

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

回答

相关问题