实现 input 只能输入数字和小数点的四种方法

本文转载自CSDN博主「酷酷的老猫」的原创文章，原文链接：https://blog.csdn.net/kukudelaomao/article/details/81536435

实现 input 只能输入数字和小数点，大家往往用到的都是replace方法，但是其实还有不少其他方案可选，以下列出一二供大家参考：

1、input 属性 type="number"

<input type="number" name="points" min="1" max="10" />

请使用下面的属性来规定对数字类型的限定：

2、input 属性 pattern

<input type="text" pattern="\d*" maxlength="2">

但是兼容性不好，Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。

注意：Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 标签的 pattern 属性。

3、replace 替换输入的值

只能为数字(有闪动)

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

4、限制输入

只能输入 数字，小数点，减号（-） 字符(无闪动) 

<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

扩展：17种正则表达式   

"^\\d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）
"^-[0-9]*[1-9][0-9]*$"　　//负整数
"^-?\\d+$"　　　　//整数
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url