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() 方法中使用了正则表达式，关于正则表达式可参见 https://developer.mozilla.org/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> 标签的输入类型 参见 https://developer.mozilla.org/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属性参见 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern