textarea 中的选项卡导致在歌剧中失去焦点答案

【问题标题】：tabs in textarea causes losing focus in operatextarea 中的选项卡导致在歌剧中失去焦点
【发布时间】：2012-09-15 03:22:18
【问题描述】：

所以我对文本区域中的 tab 键进行了 javascript 处理（插入选项卡）。在大多数情况下，这是一种魅力。

问题：Opera：如果用户按住 tab 键（tab 插入非常快），textarea 元素失去焦点，处理过程不起作用。正如您在下面的示例中所见，焦点在 2 个按钮和文本区域之间不断变化。

代码：

<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;"

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

问题似乎存在，因为opera没有在keydown事件中提供preventdefault...正在寻找解决方案...

【问题讨论】：

我喜欢你的剧本。但是当光标到达行尾时（在添加 wrap="off" 之后）它会继续在同一行中添加制表符。相反，我认为应该从下一行开始。
是的，我认为它会一直添加到同一行，因为如果你退格，你需要一段时间才能看到光标..

标签： javascript html textarea opera

【解决方案1】：

好吧，opera 似乎是一个有缺陷的软件，preventdefault 仅在 keypress 事件中有效。所以我这样解决了：

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

但是在opera中不能通过按住它来插入连续的制表符。

【讨论】：

【解决方案2】：

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

【讨论】：

wrap off 会导致各种问题，因为它与 overflow:hidden 冲突，这是一个要求。我忘了首先添加它。至于歌剧……我会看看我能做什么……
无法在 onblur 事件中捕捉到 tab 键。但即使损坏可能已经造成，我也不明白为什么按下 Tab 键时歌剧会改变焦点
我可以捕捉到是否在 onkeyup 中按下了选项卡然后 onblur do onblur="if (bIsTabPressed) document.getElementById('texta').focus(); return false;"但这并不能解决问题
@MIrrorMirror 如果 onBlur 不起作用添加另一个 <input> 位置绝对；隐藏可见性并在此输入上处理 onFocus。