如何监控input的内容变化控制Input只能输入字母

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

chenshf26

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

阅读量272

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/chenshf26/article/details/105268450

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

考虑到的事件有:

blur

change

keydown

keypress

keyup

input

textInput

模板代码

<body>
	<input type="text" id="in">
	<div id="out"></div>
	<script type="text/javascript" src="./vue.js"></script>
	<script type="text/javascript" src="./jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			function change(event){
				$('#out').html(this.value);
			}
			$('#in')[0].addEventListener('textInput', change, true);
		});
	</script>
</body>

其中blur和change事件是只有在input失去焦点后才能触发,所以不能实时监控

而keydown事件在字符被输入到input框前就会触发，所以触发时value还没被写入，注意一下

keyup事件只有松开键盘时才能触发，所以如果用户长按某个键，是不能被处理的

textInput的特点是，任何可以获取焦点的元素都可以触发keypress事件，但是textInput只能对可编辑区域产生响应,textInput似乎只能用addEventListener来添加，用ontextInput莫得反应，而且textInput对删除键不响应，同时表现的和keydown差不多，差距一个字母

那不妨引申一下，如果我们想要一个输入框，只能输入字母，虽然我们可以用type来达到这个效果，但是我们可以使用js来做这样的限制。

首先我们尝试一下keydown事件，对应event.keyCode检测输入的键值,利用preventDefault阻止字符的输入

<body>
	<input type="text" id="in">
	<div id="out"></div>
	<script type="text/javascript" src="./vue.js"></script>
	<script type="text/javascript" src="./jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			function change(event){
				if(event.keyCode > 90 || event.keyCode < 65){
					event.preventDefault();
				}
			}
			$('#in')[0].addEventListener('keydown', change, true);
		});
	</script>
</body>

结果呢，中文亦可以输入，而且删除键方向键都被屏蔽，属实不行，虽然我们可以通过修改条件来使得不去屏蔽删除键方向键，但是并不能处理中文问题。

我们上面的过程发现删除键并不会触发textInput事件，所以我们可以考虑用他来实现，对应键值是event.data，返回的是输入的符号，比如'a' 'A' 'b'，如果是粘贴的话，event.data会是那一段字符串

<body>
	<input type="text" id="in">
	<div id="out"></div>
	<script type="text/javascript" src="./vue.js"></script>
	<script type="text/javascript" src="./jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			function change(event){
				let d = event.data;
				if(!( ( d  <= 'Z' && d >= 'A') || ( d <= 'z' && d >= 'a') )){
					event.preventDefault();
				}
			}
			$('#in')[0].addEventListener('textInput', change, true);
		});
	</script>
</body>

这时候，运行代码，发现，诶，很有意思，删除键和方向键没有被屏蔽，但是我又发现一个问题，如果粘贴的字符串是'A1111'会被允许输入，因为'Z' >='A111' >= 'A',所以可能说我们加入一个length限制比较好，对于中文输入，还是不能被防止，所以还是考虑其他手段阻止中文输入比较好。

一个方法是使用css {ime-mode:disabled}会禁止使用输入法，然而chrome不支持，溜了溜了，实在是难，实在不行就每次触发事件后把input元素的value中unicode不属于字母范围的替换为''算了

chenshf26

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何监控input的内容变化控制Input只能输入字母

考虑到的事件有:blurchangekeydownkeypresskeyupinputtextInput模板代码<body> <input type="text" id="in"> <div id="out"></div> <script type="text/javascript" src="./v...
复制链接

扫一扫