代码之家  ›  专栏  ›  技术社区  ›  Casey Chu

选择文本时不触发“对焦”?

  •  2
  • Casey Chu  · 技术社区  · 15 年前

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

    以下是HTML结构:

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

    当用户点击/聚焦聊天框时,我希望文本框自动聚焦。我有这个 onfocus 聊天框上的处理程序:

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

    这是可行的,但问题是在firefox中,这使得无法在消息中选择文本 div ,因为当您尝试单击它时,焦点会转移到 textarea . 我怎样才能避免这个问题?

    (半相关问题:在Chrome中, textarea.focus() 似乎没有将键盘焦点转移到 特克斯塔利亚 ;它只突出显示框。IE8似乎对 聚焦事件 在点击的时候,即使它 tabindex 被设置。知道为什么吗?)

    4 回复  |  直到 15 年前
        1
  •  1
  •   Samuel    15 年前

    如果您使用鼠标上键事件来代替。然后检查用户是否选择了任何内容,如果没有提供文本区域焦点。这有道理吗?

    关于跨浏览器问题,您可以查看jquery或其他javascript库。如果你不打算使用它,你不需要全部的东西,但是你可以抓住部分,使焦点在所有浏览器中工作。

        2
  •  0
  •   Puaka    15 年前

    您可能需要尝试setTimeout来聚焦文本区域,如下所示:

    setTimeout(function() {
        textarea.focus();
    }, 1000);
    
        3
  •  0
  •   edtsech    15 年前

    事件onfocus只存在于表单元素:label、input、select、textarea和button。对聊天框使用onclick事件。

        4
  •  0
  •   Casey Chu    15 年前

    我找到了一个解决方案,可以在单击聊天室时自动选择一个文本区域,同时仍然可以选择文本:只需更改 div 进入之内 label .

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

    不幸的是,firefox有一个错误,它过度修正和强迫 标签 是内联的,但是可以通过使用javascript动态创建它来解决这个问题。