为什么这个textarea不关注.focus()？

Question

当用户点击"回复"按钮时,我有这个代码来关注textarea:

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

它显示了回复表单,但textarea不会关注.我正在通过AJAX添加textarea,这就是我使用的原因.live().我添加的框显示(我甚至#reply_msg通过AJAX 添加,当我按下鼠标时会发生一些事情),但它不会关注textarea.

---

编辑

我的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> 

Answer 1

单击元素会按以下顺序引发事件:

1. 鼠标按下
2. 焦点
3. 鼠标松开
4. 点击

那么,这是发生了什么:

1. mousedown 由...提出 <a>
2. 你手动聚焦 <textarea>
3. 默认事件行为尝试聚焦<a>(从中获取焦点<textarea>)

这是一个说明此行为的演示:

$("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>

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

方法1:使用压制鼠标按下的默认行为: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>

选项2:使用之后触发的事件mousedown,例如:<a>或<textarea>:

$("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>

Answer 2

专注于来自事件处理程序的东西,它本身就是重点,总是有问题的.一般的解决方案是在超时后设置焦点:

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

这让浏览器可以做到这一点,然后你回来把焦点集中到你想要的地方.