### 表单Input的高级用法11例详解
#### 1. 取消按钮按下时的虚线框
在Web开发中，当用户点击取消按钮时，有时希望原本聚焦的`<input>`框不再显示聚焦状态下的虚线边框。这种需求可以通过设置`<input>`元素的属性来实现：
```html
<input type="text" hideFocus="true" />
```
或者
```html
<input type="text" HideFocus="true" />
```
这里的`hideFocus`或`HideFocus`属性可以帮助隐藏输入框被选中时出现的虚线框。
#### 2. 只读文本框内容
有时候我们希望某个文本框的内容是不可编辑的，但又希望它能够显示出来，这时可以将`<input>`标签中的`readonly`属性设置为`true`：
```html
<input type="text" readonly="readonly" value="这是只读文本" />
```
设置了`readonly`属性后，该输入框将变为只读状态，用户无法修改其中的内容。
#### 3. 防止退后清空的TEXT文档
在某些情况下，用户可能希望输入框中的内容即使在浏览器后退后也能够保存下来。这可以通过设置`<input>`标签的行为属性实现：
```html
<input type="text" id="oPersistInput" style="behavior:url(#default#savehistory);" />
```
这里的`behavior:url(#default#savehistory);`是一个特殊的CSS属性，用于启用HTML元素的历史保存功能。
#### 4. ENTER键让光标移到下一个输入框
为了提升用户体验，在一个输入框内按下Enter键时，可以让焦点自动跳转到下一个输入框，通过JavaScript可以轻松实现：
```html
<input type="text" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" />
```
这里的`onkeydown`事件监听器会在用户按下键盘按键时触发，如果检测到的是Enter键，则会将事件的`keyCode`设置为9，从而模拟Tab键的效果。
#### 5. 限制输入为纯中文
对于特定的应用场景，可能需要限制输入框仅能输入中文字符，可以通过正则表达式结合JavaScript来实现：
```html
<input type="text" onkeyup="value = value.replace(/[-~]/g,'')" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" />
```
这里通过`onkeyup`事件处理函数，利用正则表达式`/[-~]/g`来匹配所有的非中文字符，并替换为空字符串。
#### 6. 限制输入为纯数字
同样地，对于只需要数字输入的情况，可以使用类似的处理方法：
```html
<input type="text" onkeyup="value = value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g,''))" />
```
这里的`onkeyup`事件使用正则表达式`/[^\d]/g`匹配所有非数字字符并替换为空字符串，而`onbeforepaste`则是在粘贴数据前进行过滤，确保粘贴的数据也是数字。
#### 7. 限制输入为纯数字且无闪动效果
为了消除输入过程中的闪烁现象，可以通过CSS属性`ime-mode`结合JavaScript来优化：
```html
<input type="text" style="ime-mode:disabled" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" onKeyPress="if ((event.keyCode < 48 || event.keyCode > 57)) event.returnValue = false" />
```
这里通过禁用IME模式(`ime-mode:disabled`)以及在`onKeyPress`事件中进一步限制了只能输入数字键，从而实现了无闪烁的纯数字输入。
#### 8. 限制输入为英文和数字
为了限制输入框只能接受英文和数字输入，可以通过以下方式实现：
```html
<input type="text" onkeyup="value = value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[\W]/g,''))" />
```
这里的正则表达式`[\W]`匹配所有非字母数字字符，并通过`onbeforepaste`事件来过滤剪贴板中的非字母数字字符。
#### 9. 屏蔽输入法
有时候需要禁止用户使用输入法输入，可以通过设置`ime-mode`属性为`disabled`：
```html
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if (event.keyCode == 13) event.keyCode = 9;" />
```
这样可以确保用户无法激活输入法进行输入。
#### 10. 限制输入为数字、小数点、负号
为了允许用户输入包括小数点和负号在内的数字，可以采用如下方式：
```html
<input type="text" onKeyPress="if (event.keyCode != 46 && event.keyCode != 45 && (event.keyCode < 48 || event.keyCode > 57)) event.returnValue = false" />
```
这里通过`onKeyPress`事件监听器来限制用户只能输入数字键、小数点和负号。
#### 11. 限制输入为最多两位或三位小数
对于需要控制小数位数的情况，可以通过正则表达式和JavaScript实现：
```html
<input type="text" maxlength="9" onkeyup="if (value.match(/^\d{3}$/)) value = value.replace(value, parseInt(value / 10)); value = value.replace(/\.\d*\./g, '.')" onKeyPress="if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode" />
```
这里的`onkeyup`事件处理器通过正则表达式限制最多三位小数，并确保小数点前后的数字不超过限制；而`onKeyPress`则用于进一步限制只能输入数字键。
通过以上这些高级用法，我们可以为用户提供更加丰富和灵活的输入体验，同时也提升了表单的功能性和可用性。
