下面的代码,是我们再做一个正则的判断,不让输入我们列举的特殊符号。大部分情况下是没有问题的,可是在少数人的电脑上,发现,在输入中文的时候,会有重复的情况。请看下面的动图
<p>输入中文,只使用oninput和onkeyup的方式</p>
<input type="text" name="" id="input" placeholder="不能输入特殊符号"
oninput="value=value.replace(/[`~!#$%^&*()_\+=<>?:'{}|~!#¥%……&*()={}|《》?:“”【】、;‘’,。、\s+]/g, '')">
我们猜想,这个和输入法有关,经过查找,发现了确实是这样的。具体问题请自行百度,或者查看链接。貌似是微软的输入法的问题,我试了搜狗输入法没问题。但是不能所用的用户舍弃微软的输入法。前端其实也是有解决办法的,就是使用
compositionend方法,这个是再当我们文本输入段落完成之后会触发这里的事件。
详细请看这里,知道了这个事件, 其实问题解决起来就很简单了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>输入中文,只使用oninput和onkeyup的方式</p>
<input type="text" name="" id="input1" placeholder="不能输入特殊符号"
oninput="value=value.replace(/[`~!#$%^&*()_\+=<>?:'{}|~!#¥%……&*()={}|《》?:“”【】、;‘’,。、\s+]/g, '')" />
<p>输入中文,使用compositionend事件监听</p>
<input type="text" name="" id="" class="input2" placeholder="不能输入特殊符号" />
</body>
<script>
let input = document.querySelector('.input2');
input.addEventListener('compositionstart', function (event) {
inputLock = true;
console.log('compositionstart', checkLength(event.target.value), event);
});
input.addEventListener('compositionend', function (event) {
inputLock = false;
console.log('compositionend', checkLength(event.target.value), event);
});
function checkLength(data) {
console.log(data)
input.value = data.replace(/[`~!#$%^&*()_\+=<>?:'{}|~!#¥%……&*()={}|《》?:“”【】、;‘’,。、\s+]/g, '')
}
</script>
</html>
通过这个事件触发的话,就不会出现上面GIF图的问题了。