HTML中限制input 输入框输入内容

学习&实践爱好者

已于 2024-07-30 14:51:54 修改

阅读量8.6k

点赞数 7

分类专栏： HTML5与CSS3 JavaScrip技术文章标签： html 前端 javascript

于 2022-07-12 16:54:24 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125739434

版权

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>