选择文字时不要开焦吗？

Question

我正在编写一个JavaScript聊天应用程序，但我遇到了一个小问题。

这是HTML结构：

<div id="chat">
    <div id="messages"></div>
    <textarea></textarea>
</div>

当用户点击/关注聊天框时，我希望文本框能够自动聚焦。我在聊天框中有这个onfocus处理程序：

chat.onfocus = function () {
    textarea.focus();
}

这很有用，但问题是在Firefox中，这使得无法在邮件div中选择文字，因为当您尝试点击它时，焦点会转移到textarea。我该如何避免这个问题？

（半相关问题：在Chrome中，textarea.focus()似乎没有将键盘焦点转移到textarea;它只突出显示框.IE8似乎没有响应{{ 1}}点击即可，即使设置了onfocus。任何想法为什么？）

Answer 1

如果您使用on mouse up事件，该怎么办？然后检查用户是否有任何选择，如果没有给textarea焦点。这有意义吗？

关于您可以查看jQuery或其他JavaScript库的跨浏览器问题。如果你不打算使用它，你就不需要整个东西，但是你可以抓住这些部分，使焦点在所有浏览器中都有效。

Answer 2

你可能想尝试使用setTimeout来聚焦文本区域，如下所示：

setTimeout(function() {
    textarea.focus();
}, 1000);

Answer 3

事件onfocus仅存在于表单元素：LABEL，INPUT，SELECT，TEXTAREA和BUTTON。使用onclick事件进行聊天。

Answer 4

我找到了一种解决方案，可以在点击聊天时自动选择文本区域，同时仍然可以选择文字：只需将div更改为label即可。

<label id="chat" style="display: block">
    <div id="messages"></div>
    <textarea></textarea>
</label>

不幸的是，Firefox有一个错误，它会过度纠正并强制label内联，但可以通过使用JavaScript动态创建它来解决这个问题。