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

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

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图的问题了。

解决Input输入中文重复出现拼音相关推荐

input输入中文时，拼音在输入框内会触发input事件的问题
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需求:选词完成后触发input事件,只触发一次. 解决办法: 通过查 ...
输入中文转换成拼音首字母
1.输入中文转换成拼音首字母. 需要的maven 工具包 <dependency><groupId>com.belerweb</groupId><artif ...
kali-linux 完美解决sublime输入中文
kali-linux 完美解决sublime输入中文在kali-linux 完成任何一件事情都是非常高兴的,对于长期使用window系统的人是个巨大的挑战. 对于sublime下载后出现不能输入中文 ...
Appium 解决不能输入中文字符问题
Appium 解决不能输入中文字符问题 Appium版本1.3.3以上. Java: 在capabilities中增加两项设置: capabilities.setCapability("un ...
Linux系统Deepin/Ubuntu解决IDEA输入中文光标无法跟随的问题
Linux系统Deepin/Ubuntu解决IDEA输入中文光标无法跟随的问题 1. 问题描述 2. 问题阐述 3. 解决方案 4. 解决步骤[推荐] (1) 先下载资源 (2)解压出jbr,放到一个 ...
vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
Eclipse中scanner类输入中文会把拼音也输出的问题。
我相信不止我一个遇到这样的问题. 代码块: //输出端 package TCP;import java.io.OutputStream; import java.net.Socket; import ...
网页自动加拼音html,javascript实现输入中文自动生成拼音
需求:输入中文,输入框失去焦点后自动生成全写拼音及简写拼音. 分享一款轻量级JS插件:Convert_Pinyin.js(文末可以下载). 只需引入一个JS文件,然后调用对象里在JS方法函数即可,演示 ...
解决adb输入中文以及乱码的问题
首先是第一个问题:如何解决用adb向安卓模拟器输入中文,这个百度教程会有一大堆,几乎都是用ADBKeyBoard来解决的,而且几乎都是复制的博客.本文也是用该方法进行解决的,可以直接到git上下载. ...

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

解决Input输入中文重复出现拼音相关推荐

最新文章

热门文章