Javascript HTML5限制输入字符

是否可以限制HTML5/JavaScript中某些字符的输入？例如，我是否可以在屏幕上有一个输入文本框，如果用户试图在其中键入字母，它将不会显示在框中，因为我已将其限制为仅数字

---

我知道您可以使用提交时会检查的模式，但我希望永远不要输入“坏”字符。

使用html5模式属性进行输入：

<input type="text" pattern="\d*" title="Only digits" />

或

使用html5数字类型进行输入：

<input type="number" />

输入文本框

<input type="text" onKeyDown="myFunction()" value="" />

JavaScript

function myFunction() {
    var e = event || window.event;  // get event object
    var key = e.keyCode || e.which; // get key cross-browser

    if (key < 48 || key > 57) { //if it is not a number ascii code
        //Prevent default action, which is inserting character
        if (e.preventDefault) e.preventDefault(); //normal browsers
        e.returnValue = false; //IE
    }
}

函数myFunction（）{
var e=event | | window.event；//获取事件对象
var key=e.keyCode | | e.which；//跨浏览器获取密钥
if（key<48 | | key>57）{//如果它不是数字ascii码
//防止默认操作，即插入字符
if（e.preventDefault）e.preventDefault（）；//普通浏览器
e、 returnValue=false；//IE
}
}

为了稍微改进jonhopkins的优秀答案，我添加了退格并删除了关键验收，如下所示：

    function inputValidate(){
   var e = event || window.event;  
   var key = e.keyCode || e.which;                              
   if (((key>=48)&&(key<=57))||(key==8)||(key == 46)) { //allow backspace //and delete
           if (e.preventDefault) e.preventDefault(); 
           e.returnValue = false; 
   }
 }

函数inputValidate（）{
var e=事件| | window.event；
var key=e.keyCode | | e.which；
如果（（键>=48）和&（键
var keybNumberAndAlpha=new keybEdit（'0123456789abcdefghijklmnopqrstuvwxyz'）；
函数keybEdit（strValid、strMsg）{
var reWork=new RegExp（'[a-z]'，'gi'）；//正则表达式\
//性质
if（返工试验（strValid））
this.valid=strValid.toLowerCase（）+strValid.toUpperCase（）；
其他的
this.valid=strValid；
if（（strMsg==null）| |（typeof（strMsg）==undefined'））
this.message=''；
其他的
this.message=strMsg；
//方法
this.getValid=keybEditGetValid；
this.getMessage=keybEditGetMessage；
函数keybEditGetValid（）{
返回此.valid.toString（）；
}
函数keybEditGetMessage（）{
返回此消息；
}
}
功能编辑键盘（ev、objForm、objKeyb）{
strWork=objKeyb.getValid（）；
strMsg=''；//错误消息
blnValidChar=false；//有效字符标志
var BACKSPACE=8；
var=46；
var-TAB=9；
左var=37；
var-UP=38；
var右=39；
var-DOWN=40；
var-END=35；
var-HOME=35；
//检查退格和删除
如果（ev.keyCode==退格| | ev.keyCode==删除| | ev.keyCode==制表符
||ev.keyCode==左| | ev.keyCode==上| | ev.keyCode==右| | ev.keyCode==下）{
blnValidChar=true；
}
if（！blnValidChar）//第1部分：验证输入
对于（i=0；i

用于限制字符符号，如“-”和“，”

<input type="text" pattern="[^-,]+">



限制人数

<input type="text" pattern="[^0-9]+">



用于限制字母表中的字母

<input type="text" pattern="[^a-zA-Z]+">


//改进的wbt11a功能
函数号FieldStrictInput（allowcomma、allownegative）{
var e=event | | window.event；//获取事件对象
var key=e.keyCode | | `在此处输入代码`e.which；//跨浏览器获取密钥
如果（键==8 | |键==46 | |键==9 | |键==17 | |键==91 | |键==18 |
键==116 | |键==89 | |键==67 | |键==88 | |键==35 | |键==36）//返回、删除选项卡、ctrl、win、alt、f5、粘贴、复制、剪切、主页、结束
返回true；
if（key==109&&allownegative）
返回true；
if（key==190&&allowcomma）
返回true；
如果（key>=37&&key=48&&key=96&&key这是怎么回事（它支持特殊的键，比如自动复制、粘贴、F5）

函数过滤器numericinput（）{
var e=event | | window.event；//获取事件对象
如果（例如，防止违约）{
返回；
}
常数键=e.key | | e.code；
如果（（e.key.length='0'&&key
KeyboardEvent.keyCode
已被弃用，那么这里有一个使用
hmlement.input
事件的解决方案。该解决方案使用一个简单的正则表达式，并通过从任何输入中删除有问题的元素来很好地处理复制粘贴


函数过滤器字段（e）{
设t=e.target；
让badValues=/[^\w\d]/gi；
t、 value=t.value.replace（坏值，”）；
}
让inputElement=document.getElementById（'myInput'）；
inputElement.addEventListener（'input'，filterField）；
我不确定如何完全限制它们，但也许可以在keyup（甚至keydown）上添加一个事件要检查字段的值并删除非数字字符吗？是的，谢谢。这就是计划，我只是想知道是否有内置的功能。请注意，根据模式，这只是“Firefox 4b7&Chrome 6&Opera 9&Safari 5.0.3”所支持的和向上。这允许您输入任何内容，但当您提交时，它会告诉您这是错误的。这不是我要寻找的。在您键入时丢弃无效字符的问题是，用户可能会认为他们的键盘已损坏。最好等到他们提交输入时验证它，然后拒绝它/发出消息。可能有一些问题可以立即拒绝一个键，并显示一条持续的消息，直到输入几个好的字符为止？就像海报一样，我想将输入限制为只输入数字。如果用户输入电话号码时认为自己的键盘不正确，我不太担心
//improved wbt11a function

function numberFieldStrictInput(allowcomma, allownegative) {
    var e = event || window.event;  // get event object
    var key = e.keyCode ||`enter code here` e.which; // get key cross-browser


    if(key==8 || key==46 || key == 9 || key==17 || key==91 || key==18 || 
            key==116 || key==89 || key==67 || key==88 || key==35 || key==36) //back, delete tab, ctrl, win, alt, f5, paste, copy, cut, home, end
        return true;

    if(key == 109 && allownegative)
        return true;

    if(key == 190 && allowcomma)
        return true;

    if(key>=37 && key<=40) //arrows
        return true;

    if(key>=48 && key<=57) // top key
        return true;

    if(key>=96 && key<=105) //num key
        return true;
    console.log('Not allowed key pressed '+key);

    if (e.preventDefault) e.preventDefault(); //normal browsers
        e.returnValue = false; //IE

}   

//on input put onKeyDown="numberFieldStrictInput(1,0)"

function filterNumericInput() {
    var e = event || window.event;  // get event object
    if (e.defaultPrevented) {
      return;
    }
    const key = e.key || e.code;
    if ((e.key.length <= 1) && (!(e.metaKey || e.ctrlKey || e.altKey))) {
      if (!((key >= '0' && key <= '9') || (key === '.') || (key === ',') || (key === '-') || (key === ' '))) {
        if (e.preventDefault) {
          e.preventDefault();
        } else {
          e.returnValue = false;
        }
      }
    }
}