win10 firefox下textarea输入的一个奇怪现象

codemirrorfirefox


发表于 2019-07-18 20:59


在用firefox访问codemirror官网时,发现一个问题,在用win10自带输入法输入的时候,屏幕的左上角会闪烁出现输入框,如图所示:

screen_20190708.gif

刚开始以为是CodeMirror的问题(还提了个issue),直接打开控制台调试,发现CodeMirro是通过如下元素录入内容的

<textarea style="position: absolute; bottom: -1em; padding: 0px; width: 1px; height: 1em; outline: currentcolor none medium;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" wrap="off"></textarea>

但我发现如果我把这个textarea的长度拉长,那么出现这个问题的频率就会降低很多。这里才明白用win10自带输入法的进入组字模式时如果长度大于textarea的宽度,firefox上就会出现这个现象

接下来测试独立的textarea在firefox上是否也会出现这样的问题

创建一个简单的html页面如下:

<textarea style="width: 50px">textarea1</textarea>
<textarea cols="0" rows="0">textarea2</textarea>

结果如下图所示:

screen_201807182054.gif

由此可见,问题并非出在codemirror身上,而是出在firefox身上。

一个临时的解决办法:

var userAgent = navigator.userAgent;
if(userAgent.indexOf('Windows NT 10.0') != -1 && userAgent.indexOf('Firefox') != -1){
    var textarea = wrapper.editor.getWrapperElement().querySelector('textarea');
    textarea.style.width = "1000px";
}

搜索