La soi-disant entrée de flashback de boîte de texte signifie que le foyer de la zone d'entrée est toujours au début. Comme le montre la figure, lorsque j'entre 123456789, le 987654321 s'affiche sur la zone d'entrée.
Pourquoi voulez-vous faire cette démo? C'est parce que je l'ai rencontré dans un projet. Les exigences du projet sont deux boîtes d'entrée, l'une est entrée dans un ordre positif et l'autre est entrée dans un flashback. Ci-dessous, je vais noter les idées d'implémentation et le code.
Entrée de flash-back de texte:
Tant que nous veillons à ce que le foyer de la boîte d'entrée soit toujours en premier lieu, nous pouvons y parvenir chaque fois que nous le saisissons, c'est-à-dire la récidive.
Code:
fonction setPosition (ctrl, pos) {// Définissez la fonction de position du curseur if (ctrl.setSelectionRange) {ctrl.focus (); Ctrl.SetSelectionRange (pos, pos);} else if (ctrl.createTExTrange) {var plage = ctrl.createExtrange (); // Créer une plage de zone de sélection.Collapse (true); // déplace le curseur vers la position de départ de la plage de la zone de sélection.Moveend («caractère», pos); // Modifie la position à laquelle la zone de sélection s'extral entre la plage.movestart («caractère», pos); // modifie la position dans laquelle la zone de sélection commence Range.Select (); // synchroniser le contenu sélectionné avec l'objet actuel}}Tant que nous définissons le paramètre POS à 0, ce sera bien.
Vous trouverez ci-dessous une démo complète, qui met en œuvre la suppression normale et l'entrée de flashback.
<! Doctype html> <html> <éadf> <tôme> </ title> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <style> .Content {width: 300px; margin: 0 auto; margin-top: 50px;} ul {list-style: non;}. {width: 200px;} </ style> <script src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </ script> </ head> <body> <div style = ""> <ul> <li> <entrée type = "text"> </li> <li> <fort Type = "Text"> </li> <li> <Input type = "Text"> </li> </ul> </div> </ script> function setPosition (ctrl, pos) {// Définit la fonction de position du curseur if (Ctrl.SetSelectionRange) {Ctrl.focus (); Ctrl.SetSelectionRange (pos, pos);} else if (CTRL.CreatEx plage = ctrl.createExtrange (); // Créer une plage de zone de sélection.Collapse (true); // déplace le curseur vers la position de départ de la plage de la zone de sélection.Moveend («caractère», pos); // modifie la position finale de la plage de zone de sélection.Movestart («caractère», pos); // modifie la position de départ de la plage de la zone de sélection.Select (); // Synchronionne le contenu sélectionné avec l'objet actuel}} $ ('. Elem'). On ('KeyPress KeyUp', function () {if (event.keycode === 8) return; setPosition (this, 0);}); </cript> </ body> </html>De plus, vous pouvez utiliser la fonction pertinente pour obtenir la position de mise au point.
fonction getPosition (ctrl) {// ie supportVar caretPos = 0; if (document.selection) {ctrl.focus();var Sel = document.selection.createRange();Sel.moveStart('character', -ctrl.value.length);CaretPos = Sel.text.length;}// Firefox supportelse if (ctrl.selectionStart || ctrl.selectionStart == '0')CaretPos = Ctrl.SelectionStart; Retour (CaretPos);}Résumer:
En définissant et en obtenant la mise au point de l'entrée du texte, nous pouvons faire d'autres effets spéciaux, comme supprimer un mot ou une variable entier, etc.
Si vous avez de bonnes idées sur cet article, vous pouvez @ME, j'espère que cet article peut vous aider!