input输入框输入指定的字符

最新推荐文章于 2024-02-26 15:01:15 发布

chelflan

最新推荐文章于 2024-02-26 15:01:15 发布

阅读量1.5k

点赞数

分类专栏： javaScript html 文章标签： input禁止输入 input输入指定字符

本文链接：https://blog.csdn.net/qq_31001889/article/details/124194621

版权

javaScript 同时被 2 个专栏收录

25 篇文章

订阅专栏

html

3 篇文章

订阅专栏

该博客主要介绍了如何使用JavaScript监听input输入框的keydown和keyup事件，实现实时过滤和替换特殊字符的功能。通过正则表达式判断并阻止非指定字符的输入，确保输入内容符合特定格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input输入框输入指定的字符

- 思路
- 直接上代码

思路

在当前input的dom上绑定keydown和keyup来进行拦截和替换

直接上代码

defaultTypeTextRules(inputDom,type='text'){
			inputDom.onkeyup=function(event){
				//特殊字符都用正则表达式替换掉 中文输入法来把不需要字符截取掉
				debugger
				let reg = type == 'text' ? /[·~！@#￥%……&*+={}【】、|；：‘’“”，《》。、？/.]/g : /[·~！@#￥%……&+={}|：‘’“”《》？/.]/g
				event.target.value = event.target.value.replace(reg,"");
			}
			
			inputDom.onkeydown=function(event){
				console.log(event,"keydown");
				let keyCode = event.keyCode;
				let key = event.key;
				let shiftKey = event.shiftKey; //是否按下了shift
				// 除中文、英文字符、数字、横线、下划线、中英文括号()外，其它字符都不能输入。
				    // 非中文输入法的时候
				    if(keyCode != 229){
				      let isPrenvent = true;
	            
					  let reg = type == 'text' ? /[~`!\]\[@#$%^&*=+}{\\|:;""'',><./?/*+.]/g : /[~`!@#$%^&+=|\\:""''></?/+}{.]/g
				        if (reg.test(key)) {
				          isPrenvent = true;
				        } else {
				          isPrenvent = false;
				        }
				      event.returnValue = !isPrenvent;
				}              
			}
		},