为什么这个textarea没有使用.focus（）？ [英] Why isn't this textarea focusing with .focus()?

问题描述

  $（'＃$） 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>请按一下< span class =link>回覆< / span>< / span> 
< / div> 
< / div> 
< div id =reply_holderstyle =display：none;> 
< div id =reply_tab>< img src =images / blank.gif/>回复< / DIV> 
 < input type =textid =reply_subjectclass =inputstyle =width：799px; value =Re：<？php echo $ info ['subject'];？> /> 
< br />< br /> 
< textarea name =replyid =reply_messageclass =inputspellcheck =false>< / textarea> 
< br /> 
< div id =reply_buttons> 
< button type =buttonclass =buttonid =send_reply>发送< / button> 
< button type =buttonclass =buttonid =cancel_reply_msg>取消< / button> 
<！ - < button type =buttonclass =buttonid =save_draft_reply>保存草稿< / button>  - > 
< / div> 
< / div> 
  

解决方案

点击元素会按以下顺序引发事件：
$ b $ ol

$ b $ li focus

mouseup

单击

所以，发生了什么事情：

$ b

1. mousedown 由< a>


2. 您手动关注< textarea>


3. 默认事件行为尝试以< textarea> 为重点< a> b

下面是演示此行为的演示：

 < 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： >使用事件 preventDefault（） 以抑制mousedown的默认行为：
$ b

$（document）.on（mousedown ，#reply_msg，函数（e）{e.preventDefault（）; $（本）.hide（）; $（＃reply_message）。show（）。focus（）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< a href < / textarea>< / code>  

mouseup 或点击：

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / scr < / textarea>< / code>< a href =javascript： / pre> 

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_msg via AJAX and stuff happens when I mouse down on it) but it won't focus on the textarea.

---

Edit

My HTML looks like:

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

解决方案

A click on an element raises events in the following order:

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

So, here's what's happening:

1. mousedown is raised by <a>
2. you manually focus the <textarea>
3. the default event behavior tries to focus <a> (which takes focus from the <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?

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

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

Option 2: Use an event which fires after focus, e.g.: mouseup or click:

$(document).on("mouseup", "#reply_msg", function(e) {
    $(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>

这篇关于为什么这个textarea没有使用.focus（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！