javascript - event - onkeypress html5
¿Cómo obtener el texto de un cuadro de texto de entrada durante onKeyPress? (10)
Estoy tratando de obtener el texto en un cuadro de texto mientras el usuario lo escribe ( jsfiddle playground ):
<html>
<body>
<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
</body>
<script>
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);
}
</script>
</html>
El código se ejecuta sin errores, excepto que el valor del cuadro de input text , durante onKeyPress es siempre el valor anterior al cambio:
Pregunta : ¿Cómo obtengo el texto de un cuadro de texto durante
onKeyPress?
Bonus Chatter
Hay tres eventos relacionados con "el usuario está escribiendo" en el HTML DOM:
-
onKeyDown -
onKeyPress -
onKeyUp
En Windows , el orden de los mensajes WM_Key vuelve importante cuando el usuario mantiene presionada una tecla, y la tecla comienza a repetirse:
-
WM_KEYDOWN(''a''): el usuario ha presionado la tecla A -
WM_CHAR(''a'')- se ha recibidoapersonaje del usuario -
WM_CHAR(''a'')- se ha recibidoapersonaje del usuario -
WM_CHAR(''a'')- se ha recibidoapersonaje del usuario -
WM_CHAR(''a'')- se ha recibidoapersonaje del usuario -
WM_CHAR(''a'')- se ha recibidoapersonaje del usuario -
WM_KEYUP(''a'')- el usuario ha lanzado la tecla A
Como resultado, aparecerán cinco caracteres en un control de texto: aaaaa
El punto importante es que respondes al mensaje WM_CHAR , 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 entrega KeyDown y KeyPress cada repetición de tecla. Y el evento KeyUp solo se KeyUp cuando el usuario suelta la clave.
Llévate
- puedo responder a
onKeyDownoonKeyPress, pero ambos se siguen planteando antes de que se haya actualizadoinput.value - No puedo responder a
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 de bonificación
el valor del cuadro de texto de entrada, durante onKeyPress es siempre el valor antes del cambio
Esto es a propósito: Esto permite que el oyente del evento cancele la pulsación de la tecla.
Si los oyentes del evento cancelan el evento , el valor no se actualiza. Si el evento no se cancela, el valor se actualiza, pero después de que se llamó al detector de eventos .
Para obtener el valor una vez actualizado el valor del campo, programe una función para que se ejecute en el siguiente ciclo de eventos. La forma habitual de hacerlo es llamar a setTimeout con un tiempo de espera de 0 :
$(''#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 tecla para retroceder; cambio de tecla a teclado en el código.
Al usar event.key podemos obtener valores antes de la entrada al 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()" />
Entonces, hay ventajas y desventajas para cada evento. Los eventos onkeypress y onkeydown no recuperan el último valor, y onkeypress no se onkeypress para caracteres no imprimibles en algunos navegadores. El evento onkeyup no detecta cuando se mantiene presionada una tecla para varios caracteres.
Esto es un poco raro, 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 el mejor de todos los mundos.
Intenta concatenar el evento charCode con el valor que obtienes. 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.
Mantenlo simple. Use ambos onKeyPress() y onKeyUp() :
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">
Esto se encarga de obtener el valor de cadena más actualizado (después de la tecla arriba) y también actualizaciones si el usuario mantiene presionada una tecla.
jsfiddle: http://jsfiddle.net/VDd6C/8/
Ninguna de las respuestas hasta ahora ofrece una solución completa. Hay varios problemas que abordar:
- No todas las pulsaciones de teclas se pasan a la
keydownkeypressy los controladores dekeypress(por ejemplo, algunos navegadores suprimen las teclas de retroceso y eliminación). - Manejar el
keydownno es una buena idea. ¡Hay situaciones en las que un chasquido NO produce una pulsación de tecla! -
setTimeout()soluciones de estilosetTimeout()se retrasan en los navegadores web Google Chrome / Blink hasta que el usuario deja de escribir. - Los eventos de mouse y touch se pueden usar para realizar acciones como cortar, copiar y pegar. Esos eventos no activarán eventos de teclado.
- El navegador, dependiendo del método de entrada, puede no notificar que el elemento ha cambiado hasta que el usuario navega fuera del campo.
Una solución más correcta manejará la keypress , la keypress , la input y los eventos de change .
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 captura todos los casos extremos. Al trabajar con la información de un usuario, se deben considerar todos los tipos de métodos de entrada y se debe verificar la funcionalidad entre navegadores y dispositivos cruzados. El código anterior se ha probado en Firefox, Edge y Chrome en el escritorio, así como en los dispositivos móviles que tengo.
Normalmente concateno el valor del campo (es decir, antes de que se actualice) con la clave asociada con el evento clave. El siguiente usa JS reciente, por lo que necesitaría un ajuste para obtener soporte en IE más antiguos.
Ejemplo reciente 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);
Soporte para un ejemplo de IEs más antiguo
//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, por defecto, deshabilita las pulsaciones de teclas para cosas como el espacio posterior, CTRL + A. El código anterior se acomoda para el primero, pero necesitaría más ajustes para permitir el último y algunas otras eventualidades. Ver el comentario de Ian Boyd a continuación.]
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
}
mantenerlo compacto.
Cada vez que presiona una tecla, se llama a la función edValueKeyPress() .
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 sustitución simple.
function edValueKeyPress()
{
document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}
¡Eso es todo lo que quieres, es más rápido!
<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>