teclado numerico virtual javascript
Las claves de captura se escriben en el teclado virtual de Android mediante javascript (7)
Tengo una página web con un área de texto, y necesito capturar las claves escritas por el usuario (para que pueda sustituir diferentes caracteres Unicode por las claves escritas). Mi código actual es el siguiente:
$("#myTextArea").bind(''keypress'', function(event) {
var keyInput = event.which;
// call other functions
});
Este código anterior funciona en PC y iPhone / Safari. Sin embargo, falla al usar Chrome en una tableta de Android (Samsung). Por alguna razón, cuando escribo en el teclado virtual (suave) de Android, el evento de "pulsación de tecla" no se desencadena . La versión de Android es 5.0.2.
Si intento usar "keyUp" o "keyDown", siempre devuelve 229 para todos los caracteres (excepto la tecla de retorno, espacio, retroceso, etc.).
Aunque keyCode siempre es 229, el área de texto muestra los caracteres correctos escritos por el usuario. Lo que significa que el dispositivo sabe qué clave se ingresó, pero de alguna manera no puedo obtener un control sobre este evento (y el código de la clave) usando javascript.
Estas son las alternativas que he probado hasta ahora, y sus resultados:
$("#mainTextArea").on("keydown keyup", function(event) {
// event.which and event.keyCode both return 229
$(document).on(''keypress'', function(event) {
// function is not triggered
$(''#myTextArea'').bind(''input keypress'', function(event) {
// comes inside function, but keyCode and which are undefined
Cualquier ayuda con respecto a este problema es apreciada ..
¡ME LO IMAGINÉ!
Aquí hay una solución 100% funcional que funciona EN CUALQUIER LUGAR con CADA característica, incluyendo incluso las sugerencias emoji en iOS y cualquier contenido pegado. Estoy usando la comparación de subcadenas para encontrar cosas reales que cambiaron de onInput a onInput.
Se señalan los puntos desde los cuales se borra el texto y desde donde se insertan.
Se aprecia la calificación y la selección como respuesta.
var x = document.getElementById("area"),
text = x.value,
event_count = 0
function find_Entered_And_Removed_Substrings(
previous_string, current_string, pos
) {
let
right_pos = pos,
right_boundary_of_removed =
previous_string.length -
(
current_string.length -
pos
),
left_max_pos = Math.min(
pos,
right_boundary_of_removed
),
left_pos = left_max_pos
for (
let x = 0; x < left_max_pos; x++
) {
if (
previous_string[x] !==
current_string[x]
) {
left_pos = x
break
}
}
return {
left: left_pos,
right: pos,
removed_left: left_pos,
removed_right: right_boundary_of_removed
}
}
x.oninput =
(e) => {
// debugger;
let
cur_text = x.value,
positions =
find_Entered_And_Removed_Substrings(
text, cur_text, Math.max(
x.selectionStart, x.selectionEnd
)
)
console.log(positions)
let
entered =
cur_text.substring(
positions.left, positions.right
),
removed =
text.substring(
positions.removed_left, positions.removed_right
)
if (
entered.length >
0 ||
removed.length >
0
) {
document.getElementById("entered")
.innerHTML +=
entered
document.getElementById("removed")
.innerHTML +=
removed
document.getElementById("events")
.innerHTML =
event_count++
}
text = cur_text
}
<textarea id="area"></textarea>
<br/>
<pre id="entered"></pre>
<br/>
<div id="events"></div>
<pre id="removed"></pre>
Desafortunadamente parece que no se puede hacer mucho aquí. El evento Keypress está en desuso, por lo tanto no se ha activado. 229 en keyup y keydown indica que el buffer del teclado está ocupado. La razón, cuando presiona una tecla, la entrada aún no garantiza que sea lo que el usuario presionó, debido a la sugestión automática y otros eventos que pueden suceder inmediatamente e invalidar el evento. Aunque, en mi opinión, hubiera sido mejor enviar la clave primero, luego disparar otro evento tal vez en automático sugerir para que pueda actuar por separado ...
Lo único que sé actualmente es adjuntar a ambos - keydown y keyup, almacenar el valor en keydown, obtener el valor en keyup y encontrar el delta, que es lo que el usuario presionó. Lamentablemente, esto no funcionará para los controles que no son de entrada (por ejemplo, el cuerpo o algo así). Tal vez no sea lo que quieres escuchar como respuesta, pero aún así.
Hay un evento textInput que le da el carácter ingresado
const inputField = document.getElementById(''wanted-input-field'');
inputField.addEventListener(''textInput'', function(e) {
// e.data will be the 1:1 input you done
const char = e.data; // In our example = "a"
// If you want the keyCode..
const keyCode = char.charCodeAt(0); // a = 97
// Stop processing if "a" is pressed
if (keyCode === 97) {
e.preventDefault();
return false;
}
return true;
});
Me encontré con el mismo problema. Varias explicaciones están por ahí, pero de todos modos parece extraño que no se ofrece ninguna solución. Por el momento lo resolví capturando el evento oninput .
"Este evento es similar al evento onchange. La diferencia es que el evento oninput ocurre inmediatamente después de que el valor de un elemento ha cambiado, mientras que onchange ocurre cuando el elemento pierde el foco, después de que el contenido ha sido cambiado".
Este evento también admite texto insertado, desde pegar texto o desde correcciones y sugerencias.
no me da la solución perfecta porque solo puedo manipular el texto DESPUÉS de que se haya ingresado, pero por el momento es lo mejor que tengo.
Si alguien tiene una mejor solución, me complacerá escucharla.
Me encontré con esta discusión mientras investigaba un proyecto en el que estaba trabajando. Tuve que crear máscaras de entrada para una aplicación móvil, y la respuesta de Pavel Donchev me hizo pensar en lo que podría funcionar para capturar claves en Android. En mi proyecto específico, keydown y keyup no serían suficientes porque el evento de keyup solo se desencadena después de que se lanza una clave, por lo que implicaría una validación tardía, así que investigué un poco más (y muchos intentos de prueba y error) con eventos de entrada y lo conseguí trabajando.
var input = document.getElementById(''credit-card-mask''),
oldValue,
newValue,
difference = function(value1, value2) {
var output = [];
for(i = 0; i < value2.length; i++) {
if(value1[i] !== value2[i]) {
output.push(value2[i]);
}
}
return output.join("");
},
keyDownHandler = function(e) {
oldValue = input.value;
document.getElementById("onkeydown-result").innerHTML = input.value;
},
inputHandler = function(e) {
newValue = input.value;
document.getElementById("oninput-result").innerHTML = input.value;
document.getElementById("typedvalue-result").innerHTML = difference(oldValue, newValue);
}
;
input.addEventListener(''keydown'', keyDownHandler);
input.addEventListener(''input'', inputHandler);
<input type="text" id="credit-card-mask" />
<div id="result">
<h4>on keydown value</h4>
<div id="onkeydown-result"></div>
<h4>on input value</h4>
<div id="oninput-result"></div>
<h4>typed value</h4>
<div id="typedvalue-result"></div>
</div>
El evento oninput se desencadena justo después del evento keydown, que es el momento perfecto para mis validaciones.
Compilé todo en un artículo. Si tienes curiosidad, puedes leer sobre esto here .
Recientemente implementé una función de "menciones" en la última versión de nuestra aplicación de correo electrónico asistida Astro AI. Básicamente, escribe "@" en nuestra vista web de composición y obtienes una lista de sugerencias de autocompletar. Nosotros, como la mayoría de las otras personas, tuvimos problemas para tratar de resolver esto en el Javascript. Lo que finalmente funcionó fue una solución nativa. Si usted anula el método onCreateInputConnection () de WebView, puede ajustar el resultado super.onCreateInputConnection () (que es solo una interfaz InputConnection) con una clase personalizada. Luego, en la implementación de su envoltorio, puede interceptar la entrada mediante commitText () o setComposingText () o tal vez algún otro método específico para lo que está buscando ... como eliminar. No sé si obtendrías devoluciones de llamada en los personajes de control como flechas arriba y abajo, pero quizás este sea un lugar para comenzar a resolver tu problema específico.
simplemente marque sus caracteres de entrada keyCode, si es 0 o 229, entonces aquí está la función getKeyCode () que usa charCodeAt de JS para devolver el KeyCode que toma la cadena de entrada como parámetro y devuelve el código clave del último carácter.
<script>
var getKeyCode = function (str) {
return str.charCodeAt(str.length);
}
$(''#myTextfield'').on(''keyup'',function(e){
//for android chrome keycode fix
if (navigator.userAgent.match(/Android/i)) {
var inputValue = this.value;
var charKeyCode = e.keyCode || e.which;
if (charKeyCode == 0 || charKeyCode == 229) {
charKeyCode = getKeyCode(inputValue);
alert(charKeyCode+'' key Pressed'');
}else{
alert(charKeyCode+'' key Pressed'');
}
}
});
</script>