jQuery 文本区域焦点

Posted 2023-05-07

【中文标题】jQuery 文本区域焦点

【英文标题】：jQuery Textarea focus

【发布时间】：2011-05-10 14:58:48

【问题描述】：

当我点击一个按钮时，我希望这个 li 元素中的 textarea 成为焦点。

<li class="commentBlock" id="commentbox-79" style="display: list-item;">
  <div>
    <div class="grid userImageBlockS">
      <div class="imgSmall">
        <img    src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg">
      </div>
    </div>
    <div class="grid userContentBlockS alpha omega"> 
      <form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
        <div style="display: none;">
          <input type="hidden" value="POST" name="_method">
        </div> 
        <input type="hidden" id="StatusMessageReplyPid" value="79" name="data[StatusMessageReply][pid]"> 
        <input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]"> 
        <input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]"> 
        <textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">
          Write your comment...
        </textarea>
        <input type="submit" name="" value="Comment" class="comment" id="comment-79">
      </form> 
    </div>
    <div class="clear"></div>
  </div>
</li>

这是我的jQuery 代码：

$('.user-status-buttons').click(function() 
    var id = $(this).attr('id');
    $("#commentbox-"+id).slideToggle("fast");
    $("#commentbox-"+id+" #StatusMessageMessage").focus();
    return false;
);

【问题讨论】：

您通常不想在同一个表达式中组合 2 个 id 选择器，这是不好的做法，因为 ids 意味着在整个 DOM 中是唯一的。

@Jacob 在按钮上我只有数字，但在 li 元素上我有评论 ID。这不应该有帮助吗？

【参考方案1】：

我使用计时器来聚焦文本区域：

setTimeout(function() 
 $el.find('textarea').focus();
, 0);

【讨论】：

它适用于这个解决方案。你能解释一下为什么没有它就不能工作吗？

据我了解，点击本身将在事件处理期间授予某些焦点，覆盖您自己的焦点。当前同步事件处理完成后，超时执行您的焦点。

【参考方案2】：

根据您对 Jacob 的回复，您可能想要：

$('.user-status-buttons').click(function()

    var id = $(this).attr('id');
    $("#commentbox-"+id).slideToggle("fast", function()
        $("#commentbox-"+id+" #StatusMessageReplyMessage").focus();
    );

    return false;
);

这应该让#StatusMessageReplyMessage 元素获得焦点幻灯片效果完成后。

【讨论】：

谢谢。我写错了文本区域 id :D StatusMessageReplyMessage 应该是而不是 StatusMessageMes​​sage

【参考方案3】：

最简单的解决方案是使用jQuery focus

  $('#StatusMessageReplyMessage').focus();

注意：如果您在控制台中对此进行测试，Chrome 会将焦点发送回控制台！这可能会让你相信它没有工作，而实际上它工作得很好。请注意您环境中的其他焦点抓取脚本/行为，一切都会好起来的:)

【讨论】：

这个解决方案很棒。非常直截了当。我正在使用一个受密码保护的私人网络应用程序，它位于 iframe 中，每次重新加载页面时，textarea 都会失去自动对焦，并且不得不继续单击 textarea 以再次输入，这令人沮丧。这解决了它。接受我的投票。我把它放在 textarea 所在的同一个文档中，这样当它刷新时，它会碰到那个 js 焦点线并立即将光标捕捉到它应该在的位置。