Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine einfache Möglichkeit, den Fokus in js auf die letzte Position zu verschieben

高洛峰
Freigeben: 2016-12-05 11:52:00
Original
1450 Leute haben es durchsucht

Wenn das Eingabefeld (Eingabe-/Textbereich) den Fokus erhält, verschieben Sie den Fokus an das Ende. In einigen Fällen ist die Benutzererfahrung gut. Die meisten Methoden im Internet gelten für IE-Browser.

Der Code lautet wie folgt:

var el = document.getElementById('txtArticle');
var range = el.createTextRange();
range.moveStart('character', el.value.length);
range.collapse(false);
range.select();
Nach dem Login kopieren

Tatsächlich können Sie die Zeile „moveStart“ löschen, da die Methode „createTextRange“ die Zeile erstellt Bereich, es verwendet die Collapse-Methode und die Parameter. Wenn es falsch ist, kann es an das Ende verschoben werden. collapse(true) bewegt den Cursor an den Anfang des Bereichs, Collapse(false) bewegt den Cursor an das Ende des Bereichs. Standardbrowser wie Firefox können die setSelectionRange-Methode von w3c verwenden.

Der Code lautet wie folgt:

var range, el = document.getElementById('txtPhone');
if (el.setSelectionRange) {
  el.focus();
  el.setSelectionRange(el.value.length, el.value.length)
} else {
  range = el.createTextRange();
  range.collapse(false);
  range.select();
}
Nach dem Login kopieren

Beachten Sie, dass die setSelectionRange-Methode nur für Eingabe-/Textbereichselemente gilt. Der Fokus anderer nicht nativer bearbeitbarer Elemente kann auf die Minimierungsmethode des Auswahlobjekts verschoben werden,

Zum Beispiel:

var sel, el = document.getElementById('hint');
sel = window.getSelection();
sel.collapse(el, 1);
el.focus();
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage