web-dev-qa-db-ja.com

このtextareaが.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> 
_
javascriptjqueryfocustextarea
46
Nathan

フォーカス可能な要素をマウスでクリックすると、次の順序でイベントが発生します。

  1. マウスダウン
  2. フォーカス
  3. マウスアップ
  4. クリック

だから、ここで何が起こっているのですか：

  1. mousedownは_<a>_によって発生します
  2. 手動で_<textarea>_にフォーカスします
  3. 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>_

それで、どうやってこれを回避するのですか？

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>_
49
canon

それ自体、フォーカスを付与するイベントハンドラーから何かにフォーカスすることは、常に問題です。一般的な解決策は、タイムアウト後にフォーカスを設定することです。

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

これにより、ブラウザがその処理を実行できるようになり、その後、戻って目的の場所にフォーカスを移動します。

34
Pointy

これと同じ問題でしょうか？ jQuery Textarea focus

.focus()が完了した後、.show()を呼び出してみてください。

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

今日この問題に遭遇しましたが、私の場合は、jQuery UI（v1.11.4）のバグが原因で、ドラッグ可能/ドロップ可能な要素内のtextarea要素がtextareaはフォーカスクリックを受け取ります。

解決策は、textareaがドラッグ可能な要素内に表示されないようにUIを作り直すことでした。

これは特にデバッグするのが難しい問題でしたので、他の人が役に立つと思う場合はここに答えを残します。

1
tohster