javascript - precio - safari park madrid

Centrarse programáticamente en el siguiente campo de entrada en safari móvil

Question

Tengo varios campos de entrada en línea que actúa como una línea de respuesta de crucigramas:

Cada cuadrado tiene su propio campo de entrada. La razón de esto es, entre otras cosas, que a veces un cuadrado puede rellenarse previamente. Ahora, en el navegador de escritorio, el cursor salta al siguiente campo de entrada cada vez que se ingresa un carácter. Eso funciona muy bien usando algo como:

$(this).next(''input'').focus();

Pero el problema en el safari móvil (lo probamos en iOS) es que no sé cómo "saltar" automáticamente al siguiente campo de entrada programáticamente. El usuario puede hacerlo a través del botón "siguiente", pero ¿hay alguna manera de hacerlo automáticamente?

Sé que el desencadenador de focus() tiene algunas limitaciones en ios, pero también he visto algunas soluciones utilizando clics sintetizados, etc.

Answer 1

Encontré una solución alternativa que podría funcionar para usted.

Apparently IOS / Safari solo "acepta" el foco cuando está dentro de un manejador de eventos táctiles. .focus() un evento táctil e .focus() el .focus() dentro de él. Intenté esto en mi iPhone3S y iPhone5S con Safari y funciona:

var focused = $(''input:first''); //this is just to have a starting point
$(''button'').on(''click'', function () { // trigger touch on element to set focus
focused.next(''input'').trigger(''touchstart''); // trigger touchstart
});
$(''input'').on(''touchstart'', function () {
$(this).focus(); // inside this function the focus works
focused = $(this); // to point to currently focused
});

Demo here
(presione el siguiente botón en demostración)

Answer 2

Espero que esto sea lo que estás buscando-

$(document).ready(function() {
$(''input:first'').focus(); //focus first input element
$(''input'').on(''keyup'', function(e) {
if(e.keyCode == 8) { //check if backspace is pressed
$(this).prev(''input'').focus();
return;
}
if($(this).val().length >= 1) { //for e.g. you are entering pin
if ($(this).hasClass("last")) {
alert("done");
return;
}
$(this).next(''input'').focus();
}
});
$(''input'').on(''focus'', function() {
if(!$(this).prev(''input'').val()){
$(this).prev(''input'').focus();
}
});
});

verifique el código aquí-

https://jsbin.com/soqubal/3/edit?html,output

Answer 3

Programar programáticamente el siguiente campo de entrada en un navegador móvil sin descartar el teclado parece ser imposible. (Este es un diseño terrible, pero es con lo que tenemos que trabajar.) Sin embargo, un hack inteligente es intercambiar las posiciones, los valores y los atributos del elemento de entrada con Javascript para que parezca que se está moviendo al siguiente campo cuando de hecho todavía estás enfocado en el mismo elemento. Aquí hay un código para un complemento de jQuery que intercambia la id , el name y el valor. Puede adaptarlo para intercambiar otros atributos según sea necesario. También asegúrese de reparar cualquier controlador de eventos registrado.

$.fn.fakeFocusNextInput = function() {
var sel = this;
var nextel = sel.next();
var nextval = nextel.val();
var nextid = nextel.attr(''id'');
var nextname = nextel.attr(''name'');
nextel.val(sel.val());
nextel.attr(''id'', sel.attr(''id''));
nextel.attr(''name'', sel.attr(''name''));
sel.val(nextval);
sel.attr(''id'', nextid);
sel.attr(''name'', nextname);
// Need to remove nextel and not sel to retain focus on sel
nextel.remove();
sel.before(nextel);
// Could also return ''this'' depending on how you you want the
// plug-in to work
return nextel;
};

Demostración aquí: http://jsfiddle.net/EbU6a/194/

Answer 4

UIWebview tiene la propiedad keyboardDisplayRequiresUserAction

Cuando esta propiedad se establece en true , el usuario debe tocar explícitamente los elementos en la vista web para mostrar el teclado (u otra vista de entrada relevante) para ese elemento. Cuando se establece en false , un evento de enfoque en un elemento hace que la vista de entrada se muestre y se asocie con ese elemento automáticamente.

https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

Answer 5

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#hidebox {position:absolute; border: none; background:transparent;padding:1px;}
#hidebox:focus{outline: 0;}
</style>
</head>
<body>
<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1">
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)">
</li>
<script type="text/javascript">
window.onload = function() {
document.getElementById("mFirst").focus();
}
var array = ["mFirst","mSecond","mThird","mFourth"];
function keyUp(e) {
var curId = array[Number(e.getAttribute("at"))-1];
var nextId = array[Number(e.getAttribute("at"))];
var curval= e.value;
var letters = /^[0-9a-zA-Z]+$/;
if(e.value.match(letters)){
document.getElementById(curId).value = curval;
if(e.getAttribute("at") <= 3){
var nextPos = document.getElementById(nextId).offsetLeft;
e.setAttribute("at",Number(e.getAttribute("at"))+1);
e.style.left = nextPos+"px";
}
e.value = ""
}else {
e.value = "";
}
}
function keyDown(e) {
var curId = array[Number(e.getAttribute("at"))-1];
document.getElementById(curId).value = "";
}
function onFocus(e) {
document.getElementById("hidebox").focus();
document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at")));
document.getElementById("hidebox").style.left = e.offsetLeft+"px";
document.getElementById("hidebox").style.top = e.offsetTop+"px";
}
</script>
</body>
</html>