Question

所以我在textarea（插入标签）中对tab键进行了javascript处理。在大多数情况下，这都是一种魅力。

问题：Opera：如果用户按下Tab键（标签插入非常快），textarea元素就会失去焦点，处理过程也不起作用。正如您在下面的示例中所看到的，焦点在2个按钮和textarea之间不断变化。

代码：

<html>
<head>
<script type="text/javascript">
function onkd(e) {
    var keyCode = 0;
    if (document.selection) {
        keyCode = e.keyCode;
    } else {
        keyCode = e.which;
    }

    if (keyCode == 9) {
        if (e.preventDefault) {
            e.preventDefault();
            e.stopPropagation();
        } else {
            e.returnValue = false;
            e.cancelBubble = true
        }

        var o = document.getElementById("texta");
        if (o.setSelectionRange) {
            var sS = o.selectionStart;
            var sE = o.selectionEnd;
            o.value = o.value.substring(0, sS) + "\t" + o.value.substr(sE);
            o.setSelectionRange(sS + 1, sS + 1);
            o.focus();
        } else if (o.createTextRange) {
            document.selection.createRange().text = "\t";
        }
    }
}

</script>
</head>
<body>
<p><button type="submit">dummy button1</button></p>
<textarea id="texta" style="width: 400px; height: 400px; overflow: hidden; white-space: pre;" onkeydown="onkd(event);">hahaha huhuhu hohoho hihihi hehehe</textarea>
<p><button type="submit">dummy button2</button></p>
</body>
</html>

更新了jsfiddle：http://jsfiddle.net/JEzxx/2/

如果在onkeyup事件中按Tab键然后在onblur中按下，我可以捕获：

onblur="if (bIsTabPressed) document.getElementById('texta').focus(); return false;"

但这并没有解决问题。我不明白为什么当连续按下标签键时，元素在歌剧中首先失去焦点。

问题似乎存在，因为Opera在keydown事件中没有提供防止 ......正在调查解决方案......

Answer 1

适用于Chrome：文本编辑器压缩上一行的空白，因此请使用<textarea wrap="off" ...
对于Opera：我不知道，但您可以使用相同的keyCode处理onBlur（）并重新聚焦textarea。

Answer 2

好吧，看起来Opera是一个有缺陷的软件，而preventdefault只能在按键事件中起作用。所以我这样解决了：

function onkp(e) {
    if (e.keyCode == 9 && navigator.appName == "Opera") {
        e.preventDefault();
        e.stopPropagation();
    }
}

然而，由于不能通过保持按下来连续插入连续标签而产生副作用。

textarea中的标签会导致失去歌剧焦点

2 个答案: