La llamada entrada de flashback del cuadro de texto significa que el enfoque del cuadro de entrada siempre está al principio. Como se muestra en la figura, cuando ingreso 123456789, el 987654321 se muestra en el cuadro de entrada.
¿Por qué quieres hacer esta demostración? Es porque lo encontré en un proyecto. Los requisitos del proyecto son dos cuadros de entrada, uno está entrada en un orden positivo y el otro se ingresa en un flashback. A continuación escribiré las ideas y el código de implementación.
Entrada de flashback de texto:
Mientras nos aseguremos de que el enfoque del cuadro de entrada siempre esté en primer lugar, podemos lograrlo cada vez que lo ingresamos, es decir, recurrencia.
Código:
función setPosition (ctrl, pos) {// Establecer la función de posición del cursor if (ctrl.setselectionRange) {ctrl.focus (); ctrl.setselectionRange (pos, pos);} else if (ctrl.createTextrange) {var rango = ctrl.createTextrange (); // Crear un área de selección Range.Collapse (verdadero); // mover el cursor a la posición inicial de la gama de área de selección. // Cambiar la posición en la que termina el área de selección Range.MovStart ('carácter', pos); // Cambiar la posición en la que el área de selección comienza el rango.select (); // sincronizar el contenido seleccionado al objeto actual}}Mientras establezcamos el parámetro POS en 0, estará bien.
A continuación se muestra una demostración completa, que implementa la eliminación normal y la entrada de flashback.
<! DocType html> <html> <fead> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <syle> .content {width: 300px; margin: 0 auto; margin-top: 50px;} ul {list-style: no; 200px;} </style> <script src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> <body> <byle = "" "> <ul> <li> <input type =" text "> </li> <li> <li> <put type"> </palte <inputing <port <input type = "text"> </li> </ul> </div> <script> function setPosition (ctrl, pos) {// establece la función de posición del cursor if (ctrl.setselectionRange) {ctrl.focus (); ctrl.setselectionRange (pos, pos, pos);} else if (ctrl.creatextrange) {var range = ctreTeTeTetRange () (ctrETETETETETRETETRANGE (); // Crear un área de selección Range.Collapse (verdadero); // mover el cursor a la posición inicial de la gama de área de selección. // Cambiar la posición final de la gama de área de selección. MovStart ('carácter', pos); // Cambiar la posición inicial del área de selección Range.select (); // sincroniza el contenido seleccionado al objeto actual}} $ ('. Elem'). On ('keyPress keyUp', function () {if (event.keyCode === 8) return; setPosition (this, 0);}); </script> </body> </html>Además, puede usar la función relevante para obtener la posición de enfoque.
function getPosition (Ctrl) {// es decir, soportvar caretpos = 0; if (document.selection) {ctrl.focus (); var sel = document.selection.createrGe (); sel.movestart ('caracteres', -ctrl.value.length); caretPos = sel.text.length;} // fireFox Supportelse if (ctrl.selectionStart || ctrl.selectionSection == '0' 0 ') caretPos =) ctrl.selectionStart; return (caretpos);}Resumir:
Al establecer y obtener el enfoque de entrada de texto, podemos hacer otros efectos especiales, como eliminar una palabra o variable completa, etc.
Si tiene buenas ideas sobre este artículo, puede @me, ¡espero que este artículo pueda ayudarlo!