Estoy tratando de obtener el texto en un cuadro de texto mientras el usuario escribe en él ( jsfiddle playground ):
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>
El código se ejecuta sin errores, excepto que el valor del input text
cuadro, durante onKeyPress
es siempre el valor antes del cambio:
Pregunta : ¿Cómo obtengo el texto de un cuadro de texto durante
onKeyPress
?
Chatter adicional
Hay tres eventos relacionados con "el usuario está escribiendo" en el DOM HTML:
onKeyDown
onKeyPress
onKeyUp
En Windows , el orden de los WM_Key
mensajes se vuelve importante cuando el usuario mantiene presionada una tecla y la tecla comienza a repetirse:
WM_KEYDOWN('a')
- el usuario ha pulsado la AteclaWM_CHAR('a')
-a
se ha recibido un personaje del usuarioWM_CHAR('a')
-a
se ha recibido un personaje del usuarioWM_CHAR('a')
-a
se ha recibido un personaje del usuarioWM_CHAR('a')
-a
se ha recibido un personaje del usuarioWM_CHAR('a')
-a
se ha recibido un personaje del usuarioWM_KEYUP('a')
- el usuario ha soltado la Allave
Dará como resultado la aparición de cinco caracteres en un control de texto: aaaaa
Lo importante es que tú respondas al WM_CHAR
mensaje, el que se repite. De lo contrario, perderá eventos cuando se presione una tecla.
En HTML, las cosas son ligeramente diferentes:
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp
Html ofrece una KeyDown
y KeyPress
cada tecla repetida. Y el KeyUp
evento solo se genera cuando el usuario suelta la tecla.
Para llevar
- Yo puedo responder a
onKeyDown
oonKeyPress
, pero ambos todavía se levantan antes de que elinput.value
se ha actualizado - No puedo responder
onKeyUp
, porque no sucede cuando cambia el texto en el cuadro de texto.
Pregunta: ¿Cómo obtengo el texto de un cuadro de texto durante onKeyPress
?
Lectura adicional
fuente
onKeyUp
no muestra los cambios en el cuadro de texto a medida que ocurren.Respuestas:
Manejar el
input
evento es una solución consistente: es compatible con elementostextarea
yinput
en todos los navegadores contemporáneos y se activa exactamente cuando lo necesita: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>
Sin embargo, reescribiría esto un poco:
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>
fuente
Mantenlo simple. Utilice ambos
onKeyPress()
yonKeyUp()
:<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
Esto se encarga de obtener el valor de cadena más actualizado (después de subir la tecla) y también se actualiza si el usuario mantiene presionada una tecla.
jsfiddle: http://jsfiddle.net/VDd6C/8/
fuente
onKeyUp
el propósito del usoonKeypress
), esta es la respuesta más simple, limpia y cercana que cualquiera verá. Solo el usuario más atento notará que los comentarios no coinciden con lo que ingresaron.<input>
elemento en rojo o verde, o dar alguna otra retroalimentación al usuario de que lo que ha escrito es bueno o malo. Si bien su respuesta aceptada todavía adolece del problema de ser siempre un carácter de "uno por uno" : solo el usuario más atento notará que los comentarios no coinciden con lo que ingresaron ". En realidad, dado que el un error solo ocurre durante la repetición de teclas (es decir, mantienen presionada la tecla) nadie (además de mí) va a notar el problema.Esto es a propósito: esto permite que el oyente del evento cancele la pulsación de tecla.
Si los detectores de eventos cancelan el evento , el valor no se actualiza. Si el evento no se cancela, el valor se actualiza, pero después de llamar al detector de eventos .
Para obtener el valor después de que se haya actualizado el valor del campo, programe una función para que se ejecute en el siguiente ciclo de eventos. La forma habitual de hacer esto es llamar
setTimeout
con un tiempo de espera 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); });
Pruebe aquí: http://jsfiddle.net/Q57gY/2/
Editar : algunos navegadores (por ejemplo, Chrome) no activan eventos de pulsación de teclas para retroceso; se cambió la pulsación de tecla a tecla en el código.
fuente
manténgalo compacto.
Cada vez que presiona una tecla,
edValueKeyPress()
se llama a la función .También ha declarado e inicializado algunas variables en esa función, lo que ralentiza el proceso y también requiere más CPU y memoria.
Simplemente puede usar este código, derivado de una simple sustitución.
function edValueKeyPress() { document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value; }
Eso es todo lo que quieres y es más rápido.
fuente
<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>
fuente
Ninguna de las respuestas hasta ahora ofrece una solución completa. Hay bastantes problemas que abordar:
keydown
ykeypress
manipuladores (por ejemplo, teclas retroceder y borrar son suprimidas por algunos navegadores).keydown
no es una buena idea. ¡Hay situaciones en las que una pulsación de tecla NO da como resultado una pulsación de tecla!setTimeout()
Las soluciones de estilo se retrasan en los navegadores web Google Chrome / Blink hasta que el usuario deja de escribir.Una solución más correcta manejará los
keypress
,keyup
,input
, ychange
eventos.Ejemplo:
<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>
Violín:
http://jsfiddle.net/VDd6C/2175/
El manejo de los cuatro eventos detecta todos los casos extremos. Al trabajar con la entrada de un usuario, se deben considerar todos los tipos de métodos de entrada y se debe verificar la funcionalidad entre navegadores y dispositivos. El código anterior se ha probado en Firefox, Edge y Chrome en el escritorio, así como en los dispositivos móviles que poseo.
fuente
input
evento?input
no siempre dispara. Ningún evento cubre todas las situaciones.keypress
en la respuestaNormalmente concateno el valor del campo (es decir, antes de que se actualice) con la clave asociada con el evento clave. Lo siguiente usa JS reciente, por lo que sería necesario ajustar el soporte en IE más antiguos.
Ejemplo JS reciente
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);
Ejemplo de soporte para IE más antiguos
//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: este enfoque, de forma predeterminada, deshabilita las pulsaciones de teclas para cosas como el espacio posterior, CTRL + A. El código anterior se adapta al primero, pero necesitaría más ajustes para permitir el segundo y algunas otras eventualidades. Vea el comentario de Ian Boyd a continuación.]
fuente
delete
tecla, o si el usuario presiona una tecla que no modifica el contenido (Ctrl+A
), o si el usuario selecciona algún texto y luego presionaa
para reemplazar un subconjunto. Es una buena idea, Utkanos, pero frágil.fácil...
En su controlador de eventos keyPress, escriba
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 }
fuente
e.KeyChar
es laBackspace
clave? ¿O laDelete
llave? OCtrl+A
?void
?object
? métodos de primera mayúscula?Entonces, hay ventajas y desventajas en cada evento. Los eventos
onkeypress
yonkeydown
no recuperan el valor más reciente yonkeypress
no se activa para caracteres no imprimibles en algunos navegadores. Elonkeyup
evento no detecta cuándo se mantiene presionada una tecla para varios caracteres.Esto es un poco hacky, pero haciendo 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 manejar lo mejor de todos los mundos.
fuente
Al usar event.key podemos obtener valores antes de ingresarlos en el cuadro de texto de entrada HTML. Aquí está el 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()" />
fuente
Intente concatenar el evento charCode con el valor que obtenga. Aquí hay una muestra de mi 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; }
El valor en
ab
obtendrá el último valor en el campo de entrada.fuente
Hay una forma mejor de hacer esto. Utilice el método concat. Ejemplo
declarar una variable global. esto funciona bien en angular 10, simplemente páselo a Vanilla JavaScript. Ejemplo:
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); }
fuente
Delete
,Ctrl
+X
,Ctrl
+V
,Backspace
? ¿O si han seleccionado algún texto y luego presionanA
?