@Blender: Nein, diese Frage betrifft das Hervorheben von Text in einem Element, nicht in einem Textbereich. Die beiden sind sehr unterschiedlich.
Tim Down
Antworten:
194
Um zu verhindern, dass sich der Benutzer ärgert, wenn der gesamte Text jedes Mal ausgewählt wird, wenn er versucht, das Caret mit der Maus zu bewegen, sollten Sie dies über das focusEreignis und nicht über das clickEreignis tun . Das Folgende erledigt den Job und umgeht ein Problem in Chrome, das verhindert, dass die einfachste Version (dh nur das Aufrufen der select()Methode des Textbereichs in einem focusEreignishandler) funktioniert.
<textarea id="foo">Some text</textarea><script type="text/javascript">var textBox = document.getElementById("foo");
textBox.onfocus =function(){
textBox.select();// Work around Chrome's little problem
textBox.onmouseup =function(){// Prevent further mouseup intervention
textBox.onmouseup =null;returnfalse;};};</script>
jQuery-Version:
$("#foo").focus(function(){var $this = $(this);
$this.select();// Work around Chrome's little problem
$this.mouseup(function(){// Prevent further mouseup intervention
$this.unbind("mouseup");returnfalse;});});
Ich denke, es ist besser, dieses Zeug mit einer separaten Schaltfläche "Alle Texte auswählen" zu implementieren, da die automatische Auswahl des Textes bei Fokus- oder Klickereignissen wirklich ärgerlich ist.
@zack: Das jsFiddle-Beispiel in dieser Antwort funktioniert für mich in Chrome. Ist es nicht für dich? Ich bin damit einverstanden, dass die Antwort, auf die Sie verlinkt haben, narrensicherer ist.
Tim Down
@ TimDown: Sie haben Recht, ich war ein bisschen übereifrig - eigentlich funktioniert es richtig auf "Klick", aber schlägt fehl, wenn Sie tabin den Textbereich - die Ihre andere Lösung funktioniert für beide Fälle :)
zack
Ändern Sie den obigen Code leicht und es wird wie ein Zauber funktionieren .. $("#foo").mouseup(function() {$("#foo").unbind("mouseup");return false;}); Sie müssen das Textfeld verweisen, ohne es thisnur mit vollem Pfad zu verweisen .. und es wird funktionieren ..
pratikabu
14
Besserer Weg, mit Lösung für Tab- und Chrome-Probleme und neuem JQuery-Weg
$("#element").on("focus keyup",function(e){var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;if(keycode ===9||!keycode){// Hacemos selectvar $this = $(this);
$this.select();// Para Chrome's que da problema
$this.on("mouseup",function(){// Unbindeamos el mouseup
$this.off("mouseup");returnfalse;});}});
aber ich weiß nicht, wie ich überprüfen soll, ob der Text bereits ausgewählt ist, also kann ich die beiden Aktionen umkehren :(
Alex
1
@ Alex: Ich würde mich nicht zu sehr damit anlegen, wenn ich du wäre. Benutzer erwarten Standardverhalten von Textbereichen.
Tim Down
Nein, dieser spezielle Textbereich ist nur zum Kopieren und Einfügen gedacht. Der gesamte Text, den ich darin habe, ist eine große verschlüsselte Zeichenfolge, die entweder nur vollständig ersetzt oder in die Zwischenablage kopiert werden kann
Alex
@ Alex: Ah, richtig. Möglicherweise möchten Sie es schreibgeschützt machen, indem Sie das readonlyAttribut dann hinzufügen .
Tim Down
1
@ Hollister: Nein, es ist durchaus möglich, dass Benutzer oder Skripte Inhalte innerhalb eines Div auswählen. Sie denken wahrscheinlich daran, in die Zwischenablage zu kopieren, was im Skript ohne eine Flash-basierte Bibliothek wie ZeroClipboard nicht möglich ist.
Vielleicht ist es sinnvoller, diese Frage als Duplikat zu kennzeichnen? Es war nicht wirklich Ihre Antwort, daher ist es besser, die beiden Fragen zusammenzuführen.
Blender
Einverstanden - Obwohl das OP von der zusätzlichen Erklärung für ihre Implementierung profitieren könnte. :)
Todd
Diese Frage betrifft das Hervorheben von Text in einem Element, nicht in einem Textbereich. Die beiden sind sehr unterschiedlich.
Tim Down
danke, ich habe herausgefunden, dass ich das machen kann $(this).select(), ich werde das verwenden, weil es weniger Code ist :)
Antworten:
Um zu verhindern, dass sich der Benutzer ärgert, wenn der gesamte Text jedes Mal ausgewählt wird, wenn er versucht, das Caret mit der Maus zu bewegen, sollten Sie dies über das
focus
Ereignis und nicht über dasclick
Ereignis tun . Das Folgende erledigt den Job und umgeht ein Problem in Chrome, das verhindert, dass die einfachste Version (dh nur das Aufrufen derselect()
Methode des Textbereichs in einemfocus
Ereignishandler) funktioniert.jsFiddle: http://jsfiddle.net/NM62A/
Code:
jQuery-Version:
quelle
tab
in den Textbereich - die Ihre andere Lösung funktioniert für beide Fälle :)$("#foo").mouseup(function() {
$("#foo").unbind("mouseup");
return false;
});
Sie müssen das Textfeld verweisen, ohne esthis
nur mit vollem Pfad zu verweisen .. und es wird funktionieren ..Besserer Weg, mit Lösung für Tab- und Chrome-Probleme und neuem JQuery-Weg
quelle
Am Ende habe ich Folgendes verwendet:
quelle
readonly
Attribut dann hinzufügen .quelle
Etwas kürzere jQuery-Version:
Es behandelt das Chrome-Eckgehäuse korrekt. Ein Beispiel finden Sie unter http://jsfiddle.net/Ztyx/XMkwm/ .
quelle
Text in einem Element auswählen (ähnlich wie mit der Maus hervorheben)
:) :)
Mit der akzeptierten Antwort auf diesen Beitrag können Sie die Funktion folgendermaßen aufrufen:
quelle
$(this).select()
, ich werde das verwenden, weil es weniger Code ist :)