赞
踩
最近又在撸网页,遇到个输入框限制输入数字的问题,网上查了一圈都不尽人意,于是花了些时间自己写了一个,十分好用,拿来分享一下,记得点赞收藏哦!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>限制输入框Number类型输入</title> </head> <body> <div>下面这个输入框只能输入Number相关的字符</div> <div>负号只能输入在首位;小数点只能输入1次;直接输入小数点自动补0</div> <div>使用正则实现,对输入法输入也有很好的抑制效果</div> <input type="text" oninput="value=checkInputNumber(value)"> <div>禁止小数</div> <input type="text" oninput="value=checkInputNumber(value,true,false)"> <div>禁止负数</div> <input type="text" oninput="value=checkInputNumber(value,false,true)"> <div>禁止小数和负数</div> <input type="text" oninput="value=checkInputNumber(value,false,false)"> <div>code by superliii 20220107</div> <script> let inputArr = [ "123", "123.456", "123.456.789", "111.222.333.444.5555.666....777.888.999.0000.123.456.798", "123..-.456.-..564", ".123", ".24.6asd954-cc", "asd", "asd123-435", "-123", "-.65", "-.65cc-51.erh", "-123.123", "----123.1-----23", "-123.1@@3.123", "-asd", "-asd123", "-113.123.asd", "-113.123.-asd", "-113.-123.-asd", ] inputArr.forEach((item) => { console.log(item + "\n" + checkInputNumber(item)); }) /*正则转换函数*/ /*参考:https://www.w3school.com.cn/jsref/jsref_replace.asp*/ /*参考:https://www.cnblogs.com/devcjq/articles/2920112.html*/ /*code by superliii 20220107*/ ///value:输入值,可以是一串文本,也可以挂到oninput上 ///allowNegative:允许负数 ///allowFloat:允许小数 ///返回修改完毕的文本,你可以使用Number(checkInputNumber(value))来将文本转为数字类型,注意Number有最大值限制:Number.MAX_VALUE function checkInputNumber(value, allowNegative = true, allowFloat = true) { var ret = value.replace(/[^\d\.-]/g, '')//首先替换掉所有非数字相关的字符 .replace(/\.{2,}/g, '.')//如果出现连续的小数点,只保留第一个 .replace(/\-{2,}/g, '-')//如果出现连续的负号,只保留第一个 .replace(/^(\-*)\./, '$10.')//如果除负号外第一个字符是小数点,则补0 .replace(/(^[^\.]+\.)?([^\.]*)\.*/g, "$1$2")//小数点只能出现一次,保留第一个 .replace(/(^\-)?([^\-]*)\-*/g, "$1$2");//负号只能出现在首位且仅能出现一次 if (!allowNegative) ret = ret.replace(/^\-/, '');//如果首位是负号,则去掉 if (!allowFloat) ret = ret.replace(/^0?(.*)\./, '$1');//如果有小数点,则去掉 return ret; } </script> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。