color拾取后输入法切换不了的Bug
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
今天这个bug本来不想发了
因为实在没找到比较好的解决方案
但是呢前两天答应了群里的小伙伴
把他发出来
那今天大家就当看看乐呵
如果大家有更好的解决方案呢
那就太好了
我先介绍一下这个bug特别简单
就两个input框
一个是text文本框
一个是color这个颜色拾取
在Mac下没有什么问题
正常使用
但是呢我们在windows下（确切说是Win10）
你会发现只要我们使用过这个吸管
只要把它点过
哪怕你不吸
再关上就会出现一个什么问题呢
就是这个文本框的中文输入法打不开了
大家看
包括直接点这块图标
也没法切换
刷新都不行大家看
或者点这刷新大家看
也不行没法切换那
这是edge浏览器
我们再看chrome也同样的问题
我是先刷新一下
大家看现在是有中文输入法的
然后呢我们在这点一下
点一下吸管关掉
大家看也不行了
只能输入英文了
虽然这显示的中文
但是他也没法切换
然后这也只能输入英文
这个BUG我在网上也搜了很久
没有找到什么解决方案
那后来我发现
什么时候就会好使呢
就是你切换一下
比如说你让它失去一下焦点
然后呢再回来
这就可以了
但注意啊
这个失去焦点不是让文本框失去焦点
因为刚才我都试了刷新都不行
所以要让这个网页
让这个浏览器失去焦点
我们再来试一下啊（我先刷新一下）
现在是正常的有中文输入法
那我再点一下吸管再关掉
这不行了
对吧
然后呢我们让浏览器失去一下焦点
比如我们在这个
地址栏里点一下再回来
大家看就可以了
所以呢我就在想
有没有什么办法能让这个
选完颜色之后自动失去一下焦点
那我们先用alert试一下哈
因为用了alert呢
他网页就会自动失去焦点
所以我们在这用onblur事件呢
我们弹一个alert
好再来试一下
大家看 现在没问题
然后呢我们吸取一下颜色
失去（焦点）大家看 弹alert了
其实这时候网页已经失去焦点了
我们再回来
大家看这是可以切换
而且呢中文也能用
那alert既然可以
我就想这条路应该是可以走通的
我们就想办法让他失去焦点就好了
但是alert肯定是不友好的
我就想到了window.open
因为window.open他肯定会失去焦点
所以呢我们在这用一个事件
比如我们叫fixIME
然后呢我们在这写一个方法
function fixIME()
然后呢
我们就要想办法window.open一个空的
window.open
然后呢我们在这
let 我们就叫 fixIMEWin等于这个
然后呢我们再立马的把它关掉点close
好我们来试一下啊
现在是能切换的而且中文也能用
我们再来吸一下
好我们再试一下
正常没有问题了
但是呢
这种方法为什么说不是很理想呢
因为
在一些低配的浏览器他可能会闪一下
因为你open又关掉
不过呢我在我这个虚拟机里
是从来没有遇到过这种情况
但是我们这个仍然有一个优化的空间
因为他只在windows里边有这个BUG吗
所以呢我们可以在这加一个判断
判断它是否windows系统
然后呢我们加一个判断if
windows
return一下
如果不是windows
我们就不用做这个处理了
OK 这样就可以了
只是呢这个解决方案
是建立在我们一定要用原生
的这个color拾取的基础上
当然了我们完全可以采用一些
第三方的颜色试取的插件
只是呢
有小伙伴问到了这个问题
所以呢我对这个问题就比较好奇
好奇他用原生的这个
组件到底应该怎么解决