『JavaScript』限制Input只能输入数字实现思路及代码

这玩意很多人写过，但是今天临时要用的时候找不到符合需求的，所以立马来写一个，既然都写完了而且还满符合需求的就放上来让大家鞭一鞭。

需求很简单，一个文字方块必须限制只能输入数字（或是小数点）并且要支援 IE 和 Firefox。
HTML的 Input 是这样下滴


代码如下:

<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),value)" />

•其中那个 Style 是在 IE 浏览器下有效用的，可以让使用者无法在这文字方块内使用输入法。
•而onkeyup 则是我们自己撰写的 js 啦，完整的 Code 在下面。
--------------------------------------------------------------------------------
验证只能输入数字


代码如下:

function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
$(e).val(/^\d+/.exec($(e).val()));
}
return false;
}

demo 是利用 Regex 来将不属于数字的过滤掉。
--------------------------------------------------------------------------------
实务上经常需要验证的是有小数点的栏位，网路上搜寻到的一堆是可以输入「1.2.3456」的这种诡异值，其实只要小改一下 Regex 就可以验证了。


代码如下:

function ValidateFloat(e, pnumber){
if (!/^\d+[.]?\d*$/.test(pnumber)){
$(e).val(/^\d+[.]?\d*/.exec($(e).val()));
}
return false;
}

这样子就可以输入整数也可以输入一个小数点
--------------------------------------------------------------------------------
以上就给有需要的朋友使用啦。
因为有网友说这种玩意儿不需要动用到 jQuery 的确，是不用动用到所以来写一下 纯 javascript 的版本
HTML要有所改变


代码如下:

<input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber(this,value)" />

只能输入数字（纯 javascript)


代码如下:

function ValidateNumber(e, pnumber){
if (!/^\d+$/.test(pnumber)){
e.value = /^\d+/.exec(e.value);}
return false;
}

可以输入小数（纯 javascript)


代码如下:

function ValidateNumber(e, pnumber)
{
if (!/^\d+[.]?\d*$/.test(pnumber))
{
e.value = /^\d+[.]?\d*/.exec(e.value);
}
return false;
}

有网友说他想要限制只有小数点后一位就好，因此再来小改一下其实重点只有RegExp要改而已


代码如下:

function ValidateFloat2(e, pnumber)
{
if (!/^\d+[.]?[1-9]?$/.test(pnumber))
{
e.value = /\d+[.]?[1-9]?/.exec(e.value);
}
return false;
}

如果你是用万恶的IE那当你一开始就输入非数字的时候就会送你一个讨厌的null因此又要改写成这样过滤掉


代码如下:

if (!/^\d+$/.test(pnumber))
{
var newValue = /^\d+/.exec(e.value);
if (newValue != null)
{
e.value = newValue;
}
else
{
e.value = "";
}
}
return false;

赞 (0)

相关推荐

  • 使用正则限制input框只能输入数字/英文/中文等等

    常用HTML正则表达式 1.只能输入数字和英文的: 复制代码 代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))" ID="Text1" NAME="Text1">

  • js限制文本框只能输入数字方法小结

    有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 复制代码 代码如下: <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.valu

  • js实现文本框只允许输入数字并限制数字大小的方法

    js实现文本框只允许输入数字并限制数字大小的方法

    本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-limit-num-codes/ 具体代码如下: <!DOCTYPE html PUB

  • 解决html input验证只能输入数字,不能输入其他的问题

    此方法为借鉴别人的,在此只做记录.希望对大家也有用. <input type="text" onkeyup="if(!/^\d+$/.test(this.value)) tip.innerHTML='必须输入数字,且不能有空格.'; else tip.innerHTML='';" /><span id="tip"></span> 以上这篇解决html input验证只能输入数字,不能输入其他的问题就是小编分享给

  • JS限制文本框只能输入数字和字母方法

    限制只能输入数字 复制代码 代码如下: // ---------------------------------------------------------------------- // <summary> // 限制只能输入数字 // demo: $(".onlyNum").onlyNum(); 限制使用了onlyNum类样式的控件只能输入数字 // </summary> // --------------------------------------

  • js 限制input只能输入数字、字母和汉字等等

    复制代码 代码如下: <input type="text"onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');if(this.value.split('.').length>2){this.value=this.value.split('.')[0]+'.'+this.value.split('.')[1]}"> 1.文本框只能输入数字代码(小数点也不能输入) 复制代码 代码如下: <i

  • 『JavaScript』限制Input只能输入数字实现思路及代码

    这玩意很多人写过,但是今天临时要用的时候找不到符合需求的,所以立马来写一个,既然都写完了而且还满符合需求的就放上来让大家鞭一鞭. 需求很简单,一个文字方块必须限制只能输入数字(或是小数点)并且要支援 IE 和 Firefox. HTML的 Input 是这样下滴 复制代码 代码如下: <input type="text" style="ime-mode:disabled" onkeyup="return ValidateNumber($(this),

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • jQuery控制input只能输入数字和两位小数的方法

    前言 做为一个PHPER,难免会遇到那种表单中jQuery限制输入的问题,比如,限制空格的输入,只允许输入数字,以及小数点的控制等等,这里,我们就说一下数字的限制. jquery代码 话不多说,直接先上jQuery函数,具体的可以看注释说明,在使用这个之前,请务必保证已经提前引入了jQuery库,大家可以自己下载一个jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址,直接找到你想要的引入就行.

  • 实现只能输入数字的input不用replace方法

    废话不多说,上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title></title> <script type="text/javascript"> /** * 只能输入数字0-9

  • JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

    JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

    本文实例讲述了JavaScript控制输入框中只能输入中文.数字和英文的方法.分享给大家供大家参考,具体如下: 1.问题背景: 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码: function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElemen

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

随机推荐