ti-enxame.com

Por que essa área de texto não está focada em .focus ()?

Eu tenho este código para focar uma área de texto quando o usuário clica no botão "Responder":

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

Mostra o formulário de resposta, mas a área de texto não se concentra. Estou adicionando a textarea via AJAX e é por isso que estou usando .live(). A caixa que eu adiciono mostra (eu até adiciono #reply_msg via AJAX e coisas acontecem quando eu clico nele) mas ela não foca na textarea. 


Editar

Meu HTML parece com:

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

Um clique em um elemento gera eventos na seguinte ordem:

  1. mousedown 
  2. foco
  3. mouseup
  4. clique

Então, aqui está o que está acontecendo:

  1. mousedown é gerado por <a>
  2. você foca manualmente o <textarea>
  3. o comportamento do evento padrão tenta focar <a> (que recebe o foco do <textarea>)

Aqui está uma demonstração ilustrando esse comportamento:

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

Então, como podemos contornar isso?

Opção 1: Use event.preventDefault() para suprimir o comportamento padrão do 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>

Opção 2: Use um evento que seja acionado após focus, por exemplo: mouseup ou 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>

46
canon

Concentrar-se em algo de um manipulador de eventos que, em si, concede foco, é sempre problemático. A solução geral é definir o foco após um tempo limite:

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

Isso permite que o navegador faça as coisas, e então você volta e puxa o foco para onde você quer.

32
Pointy

Poderia ser o mesmo problema como este? foco em jQuery Textarea

Tente ligar para .focus() após .show() ter concluído.

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

Eu me deparei com este problema hoje e no meu caso, foi causado por um bug no jQuery UI (v1.11.4) que faz com que elementos textarea dentro de elementos arrastáveis ​​/ droppable parem o comportamento de cliques padrão antes que o textarea receba o clique do foco.

A solução foi refazer a interface do usuário para que a textarea não apareça mais dentro do elemento arrastável. 

Esta foi uma questão particularmente difícil de depurar, por isso estou deixando uma resposta aqui no caso de outros acharem útil.

1
tohster