A chamada entrada de flashback da caixa de texto significa que o foco da caixa de entrada está sempre no início. Como mostrado na figura, quando entro 123456789, o 987654321 é exibido na caixa de entrada.
Por que você quer fazer essa demonstração? É porque eu o encontrei em um projeto. Os requisitos do projeto são duas caixas de entrada, uma é a entrada em uma ordem positiva e a outra é a entrada em um flashback. Abaixo, anotarei as idéias e o código de implementação.
Entrada de flashback de texto:
Enquanto garantirmos que o foco da caixa de entrada seja sempre em primeiro lugar, podemos alcançar isso toda vez que a inserimos, ou seja, a recorrência.
Código:
função setPosition (ctrl, pos) {// Defina a função de posição do cursor se (ctrl.setSelectionRange) {ctrl.focus (); ctrl.setSelectionRange (pos, pos);} else if (ctrl.CreateTexTrange) {var = ctrlL.creattexTrange (); // Crie um intervalo de área de seleção.Collapse (true); // mova o cursor para a posição inicial da faixa da área de seleção.movend ('caractere', pos); // altera a posição na qual a área de seleção termina. // altere a posição na qual a área de seleção inicia range.select (); // sincroniza o conteúdo selecionado com o objeto atual}}Enquanto definirmos o parâmetro POS como 0, ficará bem.
Abaixo está uma demonstração completa, que implementa a exclusão normal e a entrada de flashback.
<! Doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <estilo> .content {width: 300px; margin: 0 auto; margin-top: 50px; {width: 200px;} </style> <script src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> <body> <div estilo = "> <ul> <li> input =" type = "text"> </li> <li> <input type = "text"> </li> </ul> </div> <cript> função setPosition (ctrl, pos) {// defina a função de posição do cursor se (ctrl.setSelectionRange) {ctrl.focus; {var range = ctrl.createTexTrange (); // Crie um intervalo de área de seleção.Collapse (true); // mova o cursor para a posição inicial da faixa da área de seleção.movend ('caractere', pos); // altera a posição final da faixa da área de seleção.Movestart ('caractere', POS); // altere a posição inicial da área da área de seleção.Select (); // sincroniza o conteúdo selecionado com o objeto atual}} $ ('. Elem'). On ('keypress keyUp', function () {if (event.keycode === 8) return; setPosition (this, 0);}); </script> </body> </html>Além disso, você pode usar a função relevante para obter a posição de foco.
function getPosition (ctrl) {// ie supportVar caretpos = 0; if (document.Selection) {ctrl.focus (); var sel = document.selection.createrange (); sel.movestart ('caractere', -ctrl.value.length); caretpos = sel.text.Length;} // Firefox SupportElse if (ctrl.SelectionStart || Ctrl.selt; Ctrl.SelectionStart; Return (caretpos);}Resumir:
Ao definir e obter o foco de entrada de texto, podemos fazer outros efeitos especiais, como excluir uma palavra ou variável inteira, etc.
Se você tiver boas idéias sobre este artigo, pode @Me, espero que este artigo possa ajudá -lo!