修改

Question

当用户点击“回复”按钮时，我有这个代码来聚焦textarea：

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

显示回复表单，但textarea不会关注。我正在通过AJAX添加textarea，这就是我使用.live()的原因。我添加的框显示（我甚至通过AJAX添加#reply_msg，当我按下鼠标时会发生一些事情），但它不会关注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

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

mousedown
的焦点

鼠标松开

点击

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

mousedown由<a>
引发
您手动关注<textarea>

默认事件行为尝试关注<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>

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

使用event.preventDefault()来抑制mousedown的默认行为：

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

Answer 2

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

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

这让浏览器做了它的事情，然后你回来并把焦点集中到你想要的地方。

Answer 3

这可能与此问题相同吗？ jQuery Textarea focus

在.focus()完成后尝试拨打.show()。

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

Answer 4

今天我遇到了这个问题，在我的情况下，它是由jQuery UI（v1.11.4）中的一个错误引起的，它导致draggable / droppable元素中的textarea元素在{之前停止默认点击行为{1}}收到焦点点击。

解决方案是重新编写UI，以便textarea不再出现在可拖动元素中。

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

为什么这个textarea不关注.focus（）？

修改

4 个答案: