Se concentrer programmatiquement sur le prochain champ d'entrée dans le safari mobile
j'ai plusieurs champs d'entrée dans la ligne qui agit comme une ligne de réponse de mots croisés:
chaque carré a son propre champ d'entrée. La raison en est entre autres que parfois un carré peut être pré-peuplé. Maintenant, sur le navigateur de bureau, le curseur saute sur le champ d'entrée suivant chaque fois qu'un caractère est entré. Cela fonctionne vraiment bien en utilisant quelque chose comme:
$(this).next('input').focus();
Mais le problème sur mobile safari (nous testons sur ios) est que je ne sais pas comment "sauter" automatiquement à la prochaine entrée de champ programatically. L'utilisateur peut le faire via le bouton "suivant", mais est-il un moyen de le faire automatiquement?
je sais que le déclencheur focus() a certaines limites sur ios, mais j'ai aussi vu des solutions de contournement en utilisant des clics synthétisés, etc.
5 réponses
j'ai trouvé une solution qui pourrait fonctionner pour vous.
Apparemment IOS/Safari seulement "accepte" le focus lorsque l'intérieur d'une touche de gestionnaire d'événements. J'ai déclenché un événement tactile et inséré le .focus() à l'intérieur. J'ai essayé sur mon iPhone3S et iPhone5S avec Safari et il fonctionne:
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 ici
(appuyez sur le bouton suivant dans la démo)
par programmation déplacer vers le prochain champ de saisie dans un navigateur mobile sans quitter le clavier semble être impossible. (C'est terrible de conception, mais c'est ce que nous avons à travailler avec.) Cependant, un piratage intelligent consiste à échanger les positions, les valeurs et les attributs de L'élément d'entrée avec Javascript de sorte qu'il semble que vous vous déplacez vers le champ suivant alors qu'en fait vous êtes toujours concentrés sur le même élément. Voici le code d'un plug-in jQuery qui échange les id , name , et valeur. Vous pouvez l'adapter pour échanger d'autres attributs si nécessaire. Aussi assurez-vous de fixer toutes les gestionnaires d'événements.
$.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;
};
démo ici: http://jsfiddle.net/EbU6a/194 /
j'espère que c'est ce que vous cherchez -
$(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();
}
});
});
vérifier le code ici-
UIWebview a la propriété keyboardDisplayRequiresUserAction
lorsque cette propriété est définie à
true, l'utilisateur doit explicitement taper les éléments dans la vue web pour afficher le clavier (ou toute autre vue d'entrée pertinente) pour cet élément. Lorsqu'il est défini àfalse, un événement de mise au point sur un élément provoque l'affichage de la vue d'entrée et l'association automatique avec cet élément.
https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio
<!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>