Подтвердить что ты не робот

Почему эта текстовая область не фокусируется на .focus()?

У меня есть этот код, чтобы сфокусировать текстовое поле, когда пользователь нажимает кнопку "Ответить":

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

Он отображает форму ответа, но текстовое поле не будет фокусироваться. Я добавляю textarea через AJAX, поэтому я использую .live(). Ящик, который я добавляю, показывает (я даже добавляю #reply_msg через AJAX, и все происходит, когда я нажимаю на него), но он не будет фокусироваться на текстовом поле.

Изменить

Мой 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>
4b9b3361

ОТВЕТЫ

Ответ 1

Щелчок мышью на фокусируемом элементе вызывает события в следующем порядке:

  1. MouseDown
  2. фокус
  3. MouseUp
  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>

Ответ 2

Сосредоточение внимания на чем-либо от обработчика событий, который, сам, предоставляет фокус, всегда проблематично. Общее решение - установить фокус после таймаута:

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

Это позволяет браузеру выполнять свою работу, а затем вы возвращаетесь и фокусируетесь на том месте, где вы хотите.

Ответ 3

Может быть, такая же проблема? jQuery Textarea focus

Попробуйте позвонить .focus() после завершения .show().

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

Ответ 4

Я столкнулся с этой проблемой сегодня, и в моем случае это было вызвано ошибкой в ​​jQuery UI (v1.11.4), которая вызывает элементы textarea внутри перетаскиваемых/отбрасываемых элементов, чтобы остановить поведение кликов по умолчанию до textarea получает щелчок фокуса.

Решением было переработать интерфейс, чтобы textarea больше не отображался внутри перетаскиваемого элемента.

Это была особенно сложная проблема для отладки, поэтому я оставляю ответ здесь, если другие считают это полезным.