it-swarm.com.de

Warum wird dieser Textbereich nicht mit .focus () fokussiert?

Ich habe diesen Code, um einen Textbereich zu fokussieren, wenn der Benutzer auf die Schaltfläche "Antworten" klickt:

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

Es zeigt das Antwortformular, aber der Textbereich wird nicht scharfgestellt. Ich füge den Textbereich über AJAX hinzu, weshalb ich .live() verwende. Die von mir hinzugefügte Box wird angezeigt (ich füge sogar #reply_msg über AJAX hinzu und das passiert, wenn ich die Maustaste darauf drücke), aber sie wird sich nicht auf den Textbereich konzentrieren. 


Bearbeiten

Mein HTML sieht folgendermaßen aus:

<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

Ein Klick auf ein Element löst Ereignisse in der folgenden Reihenfolge aus:

  1. maus nach unten 
  2. Fokus
  3. mouseup
  4. klicken

Also, hier ist was passiert:

  1. mousedown wird durch <a> ausgelöst
  2. sie fokussieren manuell den <textarea>
  3. das Standardereignisverhalten versucht, <a> zu fokussieren (was den Fokus von <textarea> her übernimmt)

Hier ist eine Demo, die dieses Verhalten veranschaulicht:

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

Wie können wir das umgehen?

Option 1: Verwenden Sie event.preventDefault(), um das Standardverhalten von mousedown zu unterdrücken:

$(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: Verwenden Sie ein Ereignis, das nach focus ausgelöst wird, z. B. mouseup oder 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

Sich auf etwas von einem Event-Handler zu konzentrieren, der selbst den Fokus gewährt, ist immer problematisch. Die allgemeine Lösung besteht darin, den Fokus nach einem Timeout einzustellen:

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

Dadurch kann der Browser sein Ding ausführen, und dann kommen Sie zurück und bringen den Fokus dahin, wo Sie ihn haben möchten.

32
Pointy

Könnte es das gleiche sein wie dieses? jQuery Textarea Fokus

Versuchen Sie, .focus() aufzurufen, nachdem .show() abgeschlossen ist.

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

Ich bin heute auf dieses Problem gestoßen und in meinem Fall wurde es durch einen Fehler in der jQuery-Benutzeroberfläche (v1.11.4) verursacht, der dazu führt, dass textarea-Elemente innerhalb von ziehbaren/droppbaren Elementen das Standardklickverhalten anhalten, bevor die textarea den Fokusklick erhält.

Die Lösung bestand darin, die Benutzeroberfläche so zu überarbeiten, dass die Variable textarea nicht mehr im ziehbaren Element angezeigt wird. 

Dies war ein besonders schwieriges Problem für das Debuggen, daher lasse ich hier eine Antwort, falls andere es hilfreich finden.

1
tohster