解决Input输入中文重复出现拼音

程先生哈

已于 2023-02-24 19:27:43 修改

阅读量1.4k

点赞数

文章标签：前端 javascript html 开发语言 ecmascript

于 2021-11-01 10:42:00 首次发布

本文链接：https://blog.csdn.net/qq_35073135/article/details/129153751

版权

　　下面的代码，是我们再做一个正则的判断，不让输入我们列举的特殊符号。大部分情况下是没有问题的，可是在少数人的电脑上，发现，在输入中文的时候，会有重复的情况。请看下面的动图

1 <p>输入中文，只使用oninput和onkeyup的方式</p>
2     <input type="text" name="" id="input" placeholder="不能输入特殊符号"
3     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图的问题了。