Heim > Web-Frontend > CSS-Tutorial > Wie scrolle ich in allen Browsern außer IE6-8 und Opera zum Ende einer langen Texteingabe?

Wie scrolle ich in allen Browsern außer IE6-8 und Opera zum Ende einer langen Texteingabe?

Susan Sarandon
Freigeben: 2024-10-25 06:27:02
Original
623 Leute haben es durchsucht

How to Scroll to the End of a Long Text Input in All Browsers Except IE6-8 and Opera?

Scrollen zum Ende einer langen Texteingabe

In dieser Situation füllt ein Bildselektor ein Texteingabefeld mit einem übermäßig langen URL, die Anzeige des Anfangs der URL liefert nur minimale Informationen. Es wird nach einer Lösung gesucht, um das Textfeld ganz nach rechts zu scrollen und das Ende der URL anzuzeigen.

Browserkompatibilität

Die vorgeschlagene Lösung verwendet HTMLInputElement.setSelectionRange() um die Cursorposition am Ende des Eingabewerts festzulegen, nachdem der Fokus explizit gesetzt wurde. Diese Methode wird von allen gängigen Browsern außer IE6-8 und Opera unterstützt.

Implementierung

Um diese Lösung zu implementieren, befolgen Sie diese Schritte:

  1. Setzen Sie den focus() des Eingabefelds, um sicherzustellen, dass es aktiv ist.
  2. Legen Sie den Auswahlbereich des Eingabefelds mit setSelectionRange(foo.value.length,foo.value.length) fest. Dadurch wird der Cursor am Ende des Eingabewerts platziert.

Beispielcode

<code class="javascript">var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);</code>
Nach dem Login kopieren

Vorbehalte

Während diese Lösung das Textfeld erfolgreich an das Ende der URL scrollt, gibt es eine kleine Einschränkung: Sobald das Eingabefeld den Fokus verliert, wird wieder der Anfang der URL angezeigt.

Das obige ist der detaillierte Inhalt vonWie scrolle ich in allen Browsern außer IE6-8 und Opera zum Ende einer langen Texteingabe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage