Das sogenannte Textziel-Flashback-Eingang bedeutet, dass der Fokus des Eingangsfelds immer am Anfang liegt. Wie in der Abbildung gezeigt, wird beim Eingeben von 123456789 der 987654321 im Eingangsfeld angezeigt.
Warum willst du diese Demo machen? Es liegt daran, dass ich es in einem Projekt begegnet habe. Die Projektanforderungen sind zwei Eingangsboxen, einer wird in einer positiven Reihenfolge und der andere in einem Rückblick eingibt. Im Folgenden werde ich die Implementierungsideen und den Code aufschreiben.
Text Rückblende Eingabe:
Solange wir sicherstellen, dass der Fokus des Eingangsfelds immer in erster Linie liegt, können wir dies jedes Mal erreichen, wenn wir ihn eingeben, das heißt, wiederholt.
Code:
Funktionsetposition (ctrl, pos) {// Die Cursorpositionsfunktion if (ctrl.setSelectionRange) {ctrl.focus (); Strl.SetSelectionRange (pos, pos);} else if (ctrl.createtExtrange) {var range = ctrl.CreateTexTrange (); // Erstellen eines Auswahlbereichsbereichs.Collapse (true); // Bewegen Sie den Cursor in die Startposition des Auswahlbereichsbereichs. // Ändern Sie die Position, an der der Auswahlbereich endet. // Ändern Sie die Position, in der der Auswahlbereich den Bereich startet. Select (); // Synchronisieren Sie den ausgewählten Inhalt mit dem aktuellen Objekt}}Solange wir den Parameter POS auf 0 einstellen, wird es in Ordnung sein.
Im Folgenden finden Sie eine vollständige Demo, die die normale Löschung und einen Rückblendeeingang implementiert.
<! DocType html> <html> <kopf> <titels> </title> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <style> .Content {Breite: 300px; margin: 0 auto; {width: 200px;} </style> <script src = "http://cdn.staticFile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> <body> <div style = "> <ul> <li> <Eingabe type =" text " type = "text"> </li> <li> <Eingabe type = "text"> </li> </ul> </div> <script> Funktionsetposition (Strg, pos) {// Die Cursor -Positionsfunktion if (Strl.SetSelectionRange) {Strl.focus (); Bereich = ctrl.createTextrange (); // Erstellen eines Auswahlbereichsbereichs.Collapse (true); // Bewegen Sie den Cursor in die Startposition des Auswahlbereichsbereichs. // Ändern Sie die Endposition des Auswahlbereichsbereichs.Movestart ('Charakter', pos); // die Auswahlsposition des Auswahlbereichsbereichs ändern. Select (); // Synchronisieren Sie den ausgewählten Inhalt mit dem aktuellen Objekt}} $ ('. Elem'). On ('Schlüsselpress KeyUp', Funktion () {if (Ereignis.KeyCode === 8) return; setPosition (this, 0);}); </script> </body> </html>>Darüber hinaus können Sie die entsprechende Funktion verwenden, um die Fokusposition zu erhalten.
Funktion GetPosition (Strg) {// IE SupportVar CARETPOS = 0; if (document.Selection) {ctrl.focus (); var sel = document.Selection.Createrange (); ctrl.SelectionStart; Rückkehr (Caretpos);}Zusammenfassen:
Indem wir den Fokus der Texteingabe festlegen und erhalten, können wir einige andere Spezialeffekte ausführen, z. B. das Löschen eines gesamten Wortes oder einer Variablen usw.
Wenn Sie gute Ideen zu diesem Artikel haben, können Sie @me, ich hoffe, dieser Artikel kann Ihnen helfen!