Javascript 为什么这个 textarea 不使用 .focus() 聚焦？

Why isn't this textarea focusing with .focus()?

提问by Nathan

I have this code to focus a textarea when the user clicks on the "Reply" button:

当用户点击“回复”按钮时，我有这个代码来聚焦一个文本区域：

$('#reply_msg').live('mousedown', function() {
    $(this).hide();
    $('#reply_holder').show();
    $('#reply_message').focus();
});

It shows the reply form, but the textarea won't focus. I'm adding the textarea via AJAX which is why I am using .live(). The box that I add shows (I even add #reply_msgvia AJAX and stuff happens when I mouse down on it) but it won't focus on the textarea.

它显示了回复表单，但 textarea 不会聚焦。我正在通过 AJAX 添加文本区域，这就是我使用.live(). 我添加的框显示（我什至#reply_msg通过 AJAX添加，当我将鼠标放在它上面时会发生一些事情）但它不会专注于文本区域。

---

---

Edit

编辑

My HTML looks like:

我的 HTML 看起来像：

<div id="reply_msg">
  <div class="replybox">
  <span>Click here to <span class="link">Reply</span></span>
  </div>
  </div>
  <div id="reply_holder" style="display: none;">
  <div id="reply_tab"><img src="images/blank.gif" /> Reply</div>
  <label class="label" for="reply_subject" style="padding-top: 7px; width: 64px; color: #999; font-weight: bold; font-size: 13px;">Subject</label>
  <input type="text" id="reply_subject" class="input" style="width: 799px;" value="Re: <?php echo $info['subject']; ?>" />
  <br /><br />
  <textarea name="reply" id="reply_message" class="input" spellcheck="false"></textarea>
  <br />
  <div id="reply_buttons">
  <button type="button" class="button" id="send_reply">Send</button>
  <button type="button" class="button" id="cancel_reply_msg">Cancel</button>
  <!--<button type="button" class="button" id="save_draft_reply">Save Draft</button>-->
  </div>
</div> 

回答by canon

A mouse-click on a focusable element raises events in the following order:

鼠标单击可聚焦元素会按以下顺序引发事件：

1. mousedown
2. focus
3. mouseup
4. click

1. 鼠标按下
2. 重点
3. 鼠标向上
4. 点击

So, here's what's happening:

所以，这就是正在发生的事情：

1. mousedownis raised by <a>
2. your event handler attempts to focus the <textarea>
3. the default event behavior of mousedown tries to focus <a>(which takes focus from the <textarea>)

1. mousedown是由 <a>
2. 您的事件处理程序试图将焦点放在 <textarea>
3. mousedown 的默认事件行为尝试聚焦<a>（从 获取焦点<textarea>）

Here's a demo illustrating this behavior:

这是一个演示此行为的演示：

$("a,textarea").on("mousedown mouseup click focus blur", function(e) {
  console.log("%s: %s", this.tagName, e.type);
})
$("a").mousedown(function(e) {
  $("textarea").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)">reply</a>
<textarea></textarea>

So, how do we get around this?

那么，我们如何解决这个问题？

Use event.preventDefault()to suppress mousedown's default behavior:

使用压制鼠标按下的默认行为：event.preventDefault()

$(document).on("mousedown", "#reply_msg", function(e) {
    e.preventDefault();
    $(this).hide();
    $("#reply_message").show().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="reply_msg">reply</a>
<textarea id="reply_message"></textarea>

回答by Pointy

Focusing on something from an event handler that, itself, grants focus, is always problematic. The general solution is to set focus after a timeout:

专注于来自事件处理程序的东西，它本身授予焦点，总是有问题的。一般的解决方案是在超时后设置焦点：

setTimeout(function() {
  $('#reply_message').focus();
}, 0);

That lets the browser do its thing, and then you come back and yank focus over to where you want it.

这让浏览器做它的事情，然后你回来把注意力拉到你想要的地方。

回答by Jeremy Wiggins

Could it be the same issue as this? jQuery Textarea focus

会不会和这个问题一样？ jQuery Textarea 焦点

Try calling .focus()after .show()has completed.

完成.focus()后尝试调用.show()。

$('#reply_msg').live('mousedown', function() {
    $(this).hide();
    $('#reply_holder').show("fast", function(){
        $('#reply_message').focus();
    }); 
});

回答by tohster

I ran into this issue today and in my case, it was caused by a bug in jQuery UI (v1.11.4) which causes textareaelements inside of draggable/droppable elements to stop default click behavior before the textareareceives the focus click.

我今天遇到了这个问题，就我而言，它是由 jQuery UI (v1.11.4) 中的一个错误引起的，该错误导致textarea可拖动/可放置元素内的元素在textarea接收焦点单击之前停止默认单击行为。

The solution was to rework the UI so that the textareano longer appears inside the draggable element.

解决方案是重新设计 UI，以便textarea不再出现在可拖动元素内。

This was a particularly difficult issue to debug, so I am leaving an answer here in case others find it helpful.

这是一个特别难以调试的问题，所以我在这里留下一个答案，以防其他人觉得它有帮助。