精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

我们在设计表单的时候,经常会有一些文本框要求只能输入数字,如金额文本框、年龄文本框、成本文本框等等,此类文本框除了数字不允许别的字符输入,JS怎么办判断呢?

JS判断文本框只能输入数字方法一

JS代码如下

    function regInput(obj, reg, inputStr)  
    {  
    var docSel = document.selection.createRange()  
    if (docSel.parentElement().tagName != "INPUT") return false  
    oSel = docSel.duplicate()  
    oSel.text = ""  
    var srcRange = obj.createTextRange()  
    oSel.setEndPoint("StartToStart", srcRange)  
    var str = oSel.text + inputStr + srcRange.text.substr(oSel.text.length)  
    return reg.test(str)  
    }

在要加以限制的input中加入以下代码

  <input onkeypress="return regInput(this,/^[0-9]*$/,String.fromCharCode(event.keyCode))" onpaste="return regInput(this,/^[0-9]*$/,window.clipboardData.getData('Text'))" ondrop="return regInput(this,/^[0-9]*$/,event.dataTransfer.getData('Text'))">

js实现input输入框只能输入数字的功能方法二(完美测试通过)

JS代码如下

function keyPress() {    
     var keyCode = event.keyCode;    
     if ((keyCode >= 48 && keyCode <= 57))    
    {    
         event.returnValue = true;    
     } else {    
           event.returnValue = false;    
    }    
 }

HTML代码部分

<input type="text" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()" />

备注:style:ime-mode:disabled表示不能切换输入法,onpaste="return false;" 表示不能粘贴

JS正则判断只能输入数字方法三

<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

青岛星网温馨提醒:这是客户端JS判断只能输入数字的代码,在实际项目中应该搭配服务端判断是否为数字就更为保险了。

Tags:js 数字 文本框