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

2021-11-01 11:04:37 阅读：229 来源： 互联网

标签：中文拼音输入法 input Input compositionend event 输入

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

1 <p>输入中文，只使用oninput和onkeyup的方式</p>
2     <input type="text" name="" id="input" placeholder="不能输入特殊符号"
3     oninput="value=value.replace(/[`~!#$%^&*()_\+=<>?:'{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/g, '')">

我们猜想，这个和输入法有关，经过查找，发现了确实是这样的。具体问题请自行百度，或者查看链接。貌似是微软的输入法的问题，我试了搜狗输入法没问题。但是不能所用的用户舍弃微软的输入法。前端其实也是有解决办法的，就是使用

compositionend方法，这个是再当我们文本输入段落完成之后会触发这里的事件。详细请看这里，知道了这个事件，其实问题解决起来就很简单了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 
10 <body>
11     <p>输入中文，只使用oninput和onkeyup的方式</p>
12     <input type="text" name="" id="input1" placeholder="不能输入特殊符号" 
13          oninput="value=value.replace(/[`~!#$%^&*()_\+=<>?:'{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/g, '')" /> 
14     <p>输入中文，使用compositionend事件监听</p>     
15     <input type="text" name="" id="" class="input2" placeholder="不能输入特殊符号" /> 
16 </body>
17 <script>
18     let input = document.querySelector('.input2');
19 
20     input.addEventListener('compositionstart', function (event) {
21         inputLock = true;
22         console.log('compositionstart', checkLength(event.target.value), event);
23     });
24     input.addEventListener('compositionend', function (event) {
25         inputLock = false;
26         console.log('compositionend', checkLength(event.target.value), event);
27     });
28     function checkLength(data){
29         console.log(data)
30         input.value = data.replace(/[`~!#$%^&*()_\+=<>?:'{}|~！#￥%……&*（）={}|《》？：“”【】、；‘’，。、\s+]/g, '')
31     }
32 </script>
33 
34 </html>

通过这个事件触发的话，就不会出现上面GIF图的问题了。

标签：中文,拼音,输入法,input,Input,compositionend,event,输入
来源： https://www.cnblogs.com/daniao11417/p/14927424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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