HTML中限制input 输入框输入内容
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
HTML中限制input 输入框输入内容相关推荐
- html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
- 【el-table在表格外的input输入框输入内容实时查询出表格相应数据】
@el-table在表格外的input输入框输入内容实时查询出表格相应数据 项目场景: 最近遇到一个需求,需要在查询框输入内容时实时查询出表格数据 具体实现方法: <template>&l ...
- Firefox浏览器中,input输入框输入的内容在刷新网页后为何还在?
转自:http://www.webym.net/jiaocheng/473.html 这个问题比较容易解决,如果不希望浏览器保留以前输入的内容,只要给对应的 input 输入框加上以下参数: auto ...
- vue中实现百度地图的引用(根据输入框输入内容获取详细地址)
vue中实现百度地图的引用(根据输入框输入内容获取详细地址) 代码内容参考:https://www.cnblogs.com/shuaifing/p/8185311.html 最终实现效果 第一步:在i ...
- html输入框禁止输入汉字,input输入框输入中文时,监听的input事件怎样屏蔽拼音状态...
在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就会不断发送请求,用户体验非常差劲. 针 ...
- input 输入框输入中文
input 输入框输入中文 问题描述 在input输入框输入中文时,需要即时查询出匹配输入内容的结果,一般我们会使用input事件监听用户输入事件,但是在输入汉语拼音时,也会触发input事件,前端就 ...
- python 用户输入_Python中如何让用户输入内容
在使用python的时候,有时候我们需要和用户进行交互,让用户输入一些内容,然后根据内容在做处理.下面小编就给大家介绍在Python中如何让用户输入内容. 工具/原料 Ubuntu终端 方法/步骤 1 ...
- UE4中蓝图实现输入框输入关键字搜索对应东西
一.目的 1.想知道:UE4中蓝图实现输入框输入关键字搜索对应东西 二.参考 1.UE4 高级游戏功能系统教程-搜索查询系统-P3 搜索功能开发(完结篇) https://www.bilibili.c ...
- H5页面苹果手机点击输入框输入内容时 页面自动放大
问题:H5页面苹果手机点击输入框输入内容时,页面会自动放大,导致用户体验不好 解决:<meta name="viewport" content="width=dev ...
最新文章
- 【题解】 CF718C Sasha and Array
- 201621123069 《Java程序设计》第十一周学习总结
- 在latex中导入endnote中的参考文献——简明步骤
- redis value多大会影响性能_事务对MySQL性能有什么影响?有无索引查找对其影响有多大?...
- 广州技术沙龙第 4 期报名开始!
- 前端学习(1766):前端调试值之内存监控的原理和方法
- H2O_Hyper_V-master网页端管理程序源码
- java导出excel_java按需导出Excel并自动合同单元格
- Android 软键盘弹出,界面整体上移的问题
- JS中如何判断null
- 使用git建立本地仓储管理代码【转】
- 高精度双目立体视觉测量
- 从0开始html前端页面开发_CSS设置图像透明度
- 20154322 杨钦涵 Exp2 后门原理与实践
- 直播/点播系统快速搭建指南
- matlab实现拉格朗日插值法后的实验感想
- QT获取HDMI视频采集数据
- 圣诞素材网站推荐 这几个网站超多免费可商用素材
- BUUCTF WEB DROPBOX
- 一篇文章带你搞懂 JPA 和 hibernate
热门文章
- python获取登录按钮_python爬虫24 | 搞事情了,用 Appium 爬取你的微信朋友圈
- wireshark抓包TCP数据包
- 超全!李航《统计学习方法》读书笔记
- 超声功率放大器原理(超声功率放大器的作用是什么)
- GYM 101350 G. Snake Rana ( 容斥
- Windows 2003 Server SP2 安装后上网不稳定
- Tom邮箱好吗? “随心邮”微信收发邮件是怎么回事
- 如何开家有品味的咖啡馆
- SQLserver存储过程加密、解密
- Windows7x64安装Python3.x