Estou tentando obter o texto em uma caixa de texto conforme o usuário digita ( playground jsfiddle ):
function edValueKeyPress() {
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("lblValue");
lblValue.innerText = "The text box contains: " + s;
//var s = $("#edValue").val();
//$("#lblValue").text(s);
}
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
O código é executado sem erros, exceto que o valor da input text
caixa, durante onKeyPress
é sempre o valor antes da alteração:
Pergunta : Como obtenho o texto de uma caixa de texto durante
onKeyPress
?
Bônus de bate-papo
Existem três eventos relacionados a "o usuário está digitando" no HTML DOM:
onKeyDown
onKeyPress
onKeyUp
No Windows , a ordem das WM_Key
mensagens torna-se importante quando o usuário mantém uma tecla pressionada e a tecla começa a se repetir:
WM_KEYDOWN('a')
- o usuário pressionou a AteclaWM_CHAR('a')
- uma
caractere foi recebido do usuárioWM_CHAR('a')
- uma
caractere foi recebido do usuárioWM_CHAR('a')
- uma
caractere foi recebido do usuárioWM_CHAR('a')
- uma
caractere foi recebido do usuárioWM_CHAR('a')
- uma
caractere foi recebido do usuárioWM_KEYUP('a')
- o usuário liberou a Achave
Resultará em cinco caracteres aparecendo em um controle de texto: aaaaa
O importante é que você responda à WM_CHAR
mensagem, aquela que se repete. Caso contrário, você perderá eventos quando uma tecla for pressionada.
Em HTML, as coisas são ligeiramente diferentes:
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp
Html entrega um KeyDown
e KeyPress
cada repetição de tecla. E o KeyUp
evento só é gerado quando o usuário libera a tecla.
Aprendizado
- I pode responder a
onKeyDown
ouonKeyPress
, mas ambos ainda são levantadas antes dainput.value
foi atualizado - Não posso responder
onKeyUp
, porque isso não acontece quando o texto na caixa de texto muda.
Pergunta: Como obtenho o texto de uma caixa de texto durante onKeyPress
?
Leitura de bônus
fonte
onKeyUp
não mostra as mudanças na caixa de texto conforme elas acontecem.Respostas:
Manipular o
input
evento é uma solução consistente: ele é compatível com elementostextarea
einput
em todos os navegadores contemporâneos e dispara exatamente quando você precisa:function edValueKeyPress() { var edValue = document.getElementById("edValue"); var s = edValue.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: " + s; }
<input id="edValue" type="text" onInput="edValueKeyPress()"><br> <span id="lblValue">The text box contains: </span>
Eu reescreveria um pouco, embora:
function showCurrentValue(event) { const value = event.target.value; document.getElementById("lblValue").innerText = value; }
<input id="edValue" type="text" onInput="showCurrentValue(event)"><br> The text box contains: <span id="lblValue"></span>
fonte
Mantenha simples. Use
onKeyPress()
eonKeyUp()
:<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
Isso se encarrega de obter o valor da string mais atualizado (após a ativação da chave) e também atualiza se o usuário mantiver uma tecla pressionada.
jsfiddle: http://jsfiddle.net/VDd6C/8/
fonte
onKeyUp
(derrotando o propósito de usaronKeypress
), esta é a resposta mais simples, limpa e próxima que alguém verá. Apenas o usuário atento e observador perceberá que o feedback não corresponde ao que foi inserido.<input>
elemento de vermelho ou verde, ou dar algum outro feedback ao usuário de que o que ele digitou é bom ou ruim. Embora sua resposta aceita ainda sofra do problema de sempre ser um personagem "fora de lugar" : apenas o usuário mais observador notará que o feedback não corresponde ao que ele digitou. " Na realidade, desde o um erro só acontece durante a repetição da tecla (ou seja, eles estão segurando a tecla) ninguém (além de mim) vai notar o problema.Isso é proposital: permite que o ouvinte de evento cancele o pressionamento de tecla.
Se os ouvintes de eventos cancelarem o evento , o valor não será atualizado. Se o evento não for cancelado, o valor será atualizado, mas após a chamada do ouvinte de evento .
Para obter o valor após a atualização do valor do campo, agende uma função para ser executada no próximo loop de evento. A maneira usual de fazer isso é ligar
setTimeout
com um tempo limite de0
:$('#field').keyup(function() { var $field = $(this); // this is the value before the keypress var beforeVal = $field.val(); setTimeout(function() { // this is the value after the keypress var afterVal = $field.val(); }, 0); });
Tente aqui: http://jsfiddle.net/Q57gY/2/
Editar : Alguns navegadores (por exemplo, Chrome) não acionam eventos de pressionamento de tecla para backspace; mudou keypress para keyup no código.
fonte
mantenha-o compacto.
Cada vez que você pressiona uma tecla, a função
edValueKeyPress()
é chamada.Você também declarou e inicializou algumas variáveis nessa função - o que torna o processo lento e requer mais CPU e memória também.
Você pode simplesmente usar este código - derivado de uma substituição simples.
function edValueKeyPress() { document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value; }
Isso é tudo que você quer e é mais rápido!
fonte
<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%; margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script>
fonte
Nenhuma das respostas até agora oferece uma solução completa. Existem alguns problemas a serem resolvidos:
keydown
ekeypress
manipuladores (por exemplo, backspace e delete keys são suprimidos por alguns navegadores).keydown
não é uma boa ideia. Existem situações em que uma tecla pressionada NÃO resulta em um pressionamento de tecla!setTimeout()
as soluções de estilo ficam atrasadas nos navegadores Google Chrome / Blink até que o usuário pare de digitar.Uma solução mais correta irá lidar com os
keypress
,keyup
,input
, echange
eventos.Exemplo:
<p><input id="editvalue" type="text"></p> <p>The text box contains: <span id="labelvalue"></span></p> <script> function UpdateDisplay() { var inputelem = document.getElementById("editvalue"); var s = inputelem.value; var labelelem = document.getElementById("labelvalue"); labelelem.innerText = s; } // Initial update. UpdateDisplay(); // Register event handlers. var inputelem = document.getElementById("editvalue"); inputelem.addEventListener('keypress', UpdateDisplay); inputelem.addEventListener('keyup', UpdateDisplay); inputelem.addEventListener('input', UpdateDisplay); inputelem.addEventListener('change', UpdateDisplay); </script>
Violino:
http://jsfiddle.net/VDd6C/2175/
O tratamento de todos os quatro eventos captura todos os casos extremos. Ao trabalhar com a entrada de um usuário, todos os tipos de métodos de entrada devem ser considerados e a funcionalidade entre navegadores e dispositivos deve ser verificada. O código acima foi testado no Firefox, Edge e Chrome no desktop, bem como nos dispositivos móveis que possuo.
fonte
input
evento?input
nem sempre dispara. Nenhum evento cobre todas as situações.keypress
na respostaNormalmente concateno o valor do campo (ou seja, antes de ser atualizado) com a chave associada ao evento de chave. O seguinte usa JS recente, portanto, precisaria de ajustes para suporte em IEs mais antigos.
Exemplo recente de JS
document.querySelector('#test').addEventListener('keypress', function(evt) { var real_val = this.value + String.fromCharCode(evt.which); if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2); alert(real_val); }, false);
Suporte para exemplo de IEs mais antigos
//get field var field = document.getElementById('test'); //bind, somehow if (window.addEventListener) field.addEventListener('keypress', keypress_cb, false); else field.attachEvent('onkeypress', keypress_cb); //callback function keypress_cb(evt) { evt = evt || window.event; var code = evt.which || evt.keyCode, real_val = this.value + String.fromCharCode(code); if (code == 8) real_val = real_val.substr(0, real_val.length - 2); }
[EDITAR - esta abordagem, por padrão, desabilita pressionamentos de tecla para coisas como back space, CTRL + A. O código acima acomoda o primeiro, mas precisaria de mais ajustes para permitir o último e algumas outras eventualidades. Veja o comentário de Ian Boyd abaixo.]
fonte
delete
tecla, ou se o usuário pressiona uma tecla que não modifica o conteúdo (Ctrl+A
), ou se o usuário seleciona algum texto e pressionaa
para substituir um subconjunto. É uma boa ideia, Utkanos, mas frágil.fácil...
Em seu manipulador de eventos keyPress, escreva
void ValidateKeyPressHandler(object sender, KeyPressEventArgs e) { var tb = sender as TextBox; var startPos = tb.SelectionStart; var selLen= tb.SelectionLength; var afterEditValue = tb.Text.Remove(startPos, selLen) .Insert(startPos, e.KeyChar.ToString()); // ... more here }
fonte
e.KeyChar
for aBackspace
chave? Ou aDelete
chave? OuCtrl+A
?void
?object
? métodos de primeira maiúscula?Portanto, existem vantagens e desvantagens em cada evento. Os eventos
onkeypress
eonkeydown
não recuperam o valor mais recente eonkeypress
não disparam para caracteres não imprimíveis em alguns navegadores. Oonkeyup
evento não detecta quando uma tecla é pressionada para vários caracteres.Isso é um pouco hackeado, mas fazendo algo como
function edValueKeyDown(input) { var s = input.value; var lblValue = document.getElementById("lblValue"); lblValue.innerText = "The text box contains: "+s; //var s = $("#edValue").val(); //$("#lblValue").text(s); }
<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />
parece lidar com o melhor de todos os mundos.
fonte
Usando event.key , podemos obter valores antes da entrada na caixa de texto HTML Input. Aqui está o código.
function checkText() { console.log("Value Entered which was prevented was - " + event.key); //Following will prevent displaying value on textbox //You need to use your validation functions here and return value true or false. return false; }
<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />
fonte
Tente concatenar o evento charCode com o valor obtido. Aqui está um exemplo do meu código:
<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10"> <p id="demo"></p>
js:
function cnum(event, str) { var a = event.charCode; var ab = str.value + String.fromCharCode(a); document.getElementById('demo').innerHTML = ab; }
O valor em
ab
obterá o valor mais recente no campo de entrada.fonte
Existe uma maneira melhor de fazer isso. Use o método concat. Exemplo
declara uma variável global. isso funciona bem no angular 10, basta passá-lo para o Vanilla JavaScript. Exemplo:
HTML
<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br> <span id="lblValue">The text box contains: </span>
CÓDIGO
emptyString = '' edValueKeyPress ($event){ this.emptyString = this.emptyString.concat($event.key); console.log(this.emptyString); }
fonte
Delete
,Ctrl
+X
,Ctrl
+V
,Backspace
? Ou se eles selecionaram algum texto e pressionaramA
?