javascript-为什么不使用.focus()聚焦此文本区域?

当用户单击“答复”按钮时,我有以下代码可以使文本区域集中显示:

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

它显示了答复表单,但文本区域不会集中显示。 我通过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> 
Nathan asked 2020-06-27T23:37:33Z
4个解决方案
49 votes

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

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

所以,这是正在发生的事情:

  1. <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><textarea>提出
  2. 您手动聚焦<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>
  3. mousedown的默认事件行为会尝试聚焦<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>(该焦点来自<textarea>

这是演示此行为的演示:

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

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

preventDefault()抑制mousedown的默认行为:

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

canon answered 2020-06-27T23:40:52Z
34 votes

专注于事件处理程序本身授予焦点的某些东西总是有问题的。 通用解决方案是在超时后设置焦点:

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

这样一来,浏览器就可以完成工作,然后返回并集中精力到所需的位置。

Pointy answered 2020-06-27T23:41:17Z
4 votes

可能是这个问题吗? jQuery Textarea焦点

.show()完成后,尝试致电.focus()

$('#reply_msg').live('mousedown', function() {
    $(this).hide();
    $('#reply_holder').show("fast", function(){
        $('#reply_message').focus();
    }); 
});
Jeremy Wiggins answered 2020-06-27T23:41:41Z
1 votes

我今天遇到了这个问题,在我的情况下,这是由jQuery UI(v1.11.4)中的错误引起的,该错误导致可拖动/可拖放元素内的textarea元素在textarea收到焦点点击之前停止默认的点击行为。

解决方案是对UI进行重新处理,以使textarea不再出现在可拖动元素内。

这是一个特别难以调试的问题,因此,如果其他人觉得有帮助,我在这里留下答案。

tohster answered 2020-06-27T23:42:10Z
translate from https://stackoverflow.com:/questions/8380759/why-isnt-this-textarea-focusing-with-focus