### 只能输入数字和小数点的JS方法详解
#### 概述
在Web开发过程中，经常需要对用户输入的数据进行验证，特别是在涉及到数值输入的场景中，限制用户只能输入数字（包括整数和小数）是非常常见的需求。本文将详细介绍几种实现“只能输入数字和小数点”的JavaScript方法，并通过具体的代码示例来解释每种方法的工作原理。
#### 方法一：使用正则表达式过滤非数字字符
这种方法的核心思想是监听`onkeyup`事件，在每次按键抬起时使用正则表达式匹配并移除所有非数字字符：
```html
<input onkeyup="this.value = this.value.replace(/\D/g, '')" />
```
**解析**：
- `/\D/g`: 正则表达式中的`\D`表示匹配任何非数字字符，`g`标志表示全局匹配。
- `this.value = this.value.replace(/\D/g, '')`: 使用`replace()`函数替换所有非数字字符为空字符串。
#### 方法二：使用`isNaN()`函数检查非法输入
此方法利用`isNaN()`函数判断输入值是否为非数字，如果是，则执行撤销操作：
```html
<input onkeyup="if (isNaN(value)) execCommand('undo')" onafterpaste="if (isNaN(value)) execCommand('undo')" />
```
**解析**：
- `isNaN(value)`: 如果`value`不是一个有效的数字，则返回`true`。
- `execCommand('undo')`: 执行撤销命令，即撤销用户的上一次操作。
#### 方法三：复杂条件下的数字格式控制
这种方法不仅限于简单地过滤非数字字符，还提供了更精细的控制，例如限制小数位数等：
```html
<input type="text" t_value="" o_value=""
onkeypress="if (!this.value.match(/^[\+\-]?\d*?\.?\d*?$/)) this.value = this.t_value; else this.t_value = this.value;
if (this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)/)) this.o_value = this.value"
onkeyup="if (!this.value.match(/^[\+\-]?\d*?\.?\d*?$/)) this.value = this.t_value; else this.t_value = this.value;
if (this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)/)) this.o_value = this.value"
onblur="if (!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/)) this.value = this.o_value; else {
if (this.value.match(/^\.\d+$/)) this.value = 0 + this.value;
if (this.value.match(/^\.$/)) this.value = 0;
this.o_value = this.value
}" />
```
**解析**：
- `t_value`和`o_value`用于存储临时值和原始值，以便在输入不合法时恢复。
- 正则表达式`/^[\+\-]?\d*?\.?\d*?$/`用于验证输入是否符合数字格式（允许加减号、小数点）。
- `onkeypress`、`onkeyup`和`onblur`事件分别处理键按下、键抬起和失去焦点的情况。
#### 方法四：禁止输入数字
这种方法与题目要求相反，但仍然可以作为参考。它限制了用户只能输入非数字字符：
```html
<input onkeyup="value = value.replace(/[\d]/g, '')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[\d]/g, ''))" maxlength="10" name="Numbers" />
```
**解析**：
- `[\d]`匹配所有数字字符。
- `onbeforepaste`事件允许在粘贴前修改剪贴板数据，防止粘贴数字。
#### 方法五：仅允许输入英文字母和小数点
这种方法允许用户输入英文字母和小数点：
```html
<input onkeyup="value = value.replace(/[^a-zA-Z\.\d]/ig, '')" />
```
**解析**：
- `[^a-zA-Z\.\d]`表示匹配除了英文字母、小数点和数字之外的所有字符。
#### 方法六：特定字符过滤
这种方法允许输入特定的字符组合，如数字和特定的文本（例如“chun”）：
```html
<input onKeyUp="value = value.replace(/[^chun\d]/g, '')" />
```
**解析**：
- `[^chun\d]`表示匹配除了字符“c”、“h”、“u”、“n”和数字之外的所有字符。
#### 方法七：小数点位置限制
这种方法允许输入数字和小数点，但限制了小数点的位置和数量：
```html
<input onKeyPress="if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 46 || /\.\d\d$/.test(value)) event.returnValue = false" />
```
**解析**：
- `event.keyCode`: 获取按键的ASCII码。
- `/.\d\d$/.test(value)`: 验证是否已经输入了两位小数。
#### 方法八：自定义格式化小数
这种方法自动将输入的小数格式化为标准格式：
```html
<input onkeyup="this.value = this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')" />
```
**解析**：
- `^(\-)*(\d+)\.(\d\d).*`: 匹配开头可能带有一个或多个减号、一个整数部分、一个两位小数部分。
- `$1$2.$3`: 替换为标准化的格式。
#### 结论
以上介绍了几种实现“只能输入数字和小数点”的JavaScript方法，每种方法都有其特点和适用场景。开发者可以根据具体需求选择合适的方法进行实现。对于更复杂的需求，还可以结合多种方法，编写更强大的输入验证逻辑。
