HTML中限制input 输入框输入内容
先介绍使用 oninput 事件，限制HTML中input 输入框输入内容的方式，再介绍用其它方式限制HTML中input 输入框输入内容。
只能输入纯数字的输入框
关键代码oninput = "value=value. replace(/[^\d]/g,'')"，注意括号中是两个单引号，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入纯数字</title></head><body>只能输入纯数字的输入框:<input type="text" oninput="value=value.replace(/[^\d]/g,'')"></body></html>
说明：其中replace() 方法中使用了正则表达式，关于正则表达式可参见 /zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
只能输入大小写字母、数字、下划线
关键代码oninput = "value=value.replace(/[^\w_]/g,''')"，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入大小写字母、数字、下划线</title></head><body>只能输入大小写字母、数字、下划线的输入框:<input type="text" oninput="value=value.replace(/[^\w_]/g,'')"></body></html>
只能输入小写字母、数字、下划线
关键代码oninput = "value=value. replace(/[^a-z0-9_]/g,'')，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入小写字母、数字、下划线</title></head><body>只能输入小写字母、数字、下划线的输入框:<input type="text" oninput="value=value.replace(/[^a-z0-9_]/g,'')"></body></html>
只能输入数字和点
关键代码oninput = "value=value. replace(/[^\d.]/g,'')"，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入数字和点</title></head><body>只能输入数字和点的输入框:<input type="text" oninput="value=value.replace(/[^\d.]/g,'')"></body></html>
只能输入中文
关键代码oninput = "value=value.replace(/[^\u4e00-\u9fa5]/g,'')"，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入中文</title></head><body>只能输入中文的输入框:<input type="text" oninput="value=value.replace(/[^\u4e00-\u9fa5]/g,'')"> </body></html>
只能输入英文
关键代码oninput = "value=value.replace(/[^a-zA-Z]/g,'')"，完整代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入英文</title></head><body>只能输入英文的输入框:<input type="text" oninput="value=value.replace(/[^a-zA-Z]/g,'')"> </body></html>
上面使用 oninput 事件，限制HTML中input 输入框输入内容的方式，下面介绍用其它方式限制HTML中input 输入框输入内容。
设置不可编辑方法
限制input 输入框输入内容
可以使用disabled 属性、readonly 属性或readonly unselectable属性
disabled="disabled" 和readonly unselectable="on"或readonly="readonly"
disabled 属性使input输入框只读，可复制，可选择，不能提交即后台不会接收到传值，文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。
示例：<input type="text" disabled="disabled" />
完整示例如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入大小写字母、数字、下划线</title></head><body>输入框不可编辑且变灰:<input type="text" value="abc123" disabled="disabled"/></body></html>
readonly 属性使input输入框只读，可复制，可选择，能提交即后台会接收到传值。
示例：<input type="text" readonly="readonly">
完整示例如下：
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>只能输入大小写字母、数字、下划线</title></head><body>输入框不可编辑:<input type="text" value="abc123" readonly="readonly"/></body></html>
readonly unselectable 属性
示例：<input type="text"readonly unselectable="on">
readonly unselectable="on"和readonly="readonly"效果类似，就不多说了。
HTML的 <input>标签类型也能决定输入
例如：
<!DOCTYPE html><html><head><mete charset="utf-8"><title>input标签类型测试 </title></head><body> 此框只能输入数值：<input type="number" /> </body></html>
<input> 标签的输入类型 参见 /zh-CN/docs/Web/HTML/Element/Input
HTML的<input>标签的pattern属性也能规定用于验证
例如：
<!DOCTYPE html><html><head><mete charset="utf-8"><title>input标签pattern属性测试 </title></head><body> <form>三个字母：<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三个字母"><input type="submit"></form></body></html>
HTML的<input>的pattern属性参见 /zh-CN/docs/Web/HTML/Attributes/pattern
