Fokus programmatisch auf nächste Eingabefeld in der mobilen Safari

ich in Zeile mehrere Eingabefelder, die wie ein Kreuzwort Antwort Linie wirkt:Fokus programmatisch auf nächste Eingabefeld in der mobilen Safari

enter image description here

Jedes Quadrat hat ein eigenes Eingabefeld. Der Grund dafür ist unter anderem, dass manchmal ein Quadrat vorbelegt werden kann. Auf dem Desktop-Browser springt der Cursor jetzt zum nächsten Eingabefeld, sobald ein Zeichen eingegeben wird. Das funktioniert wirklich gut etwas mit wie:

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

Aber das Problem auf mobile Safari (wir auf ios-Test) ist, dass ich weiß nicht, wie man automatisch „Sprung“ auf das nächste Eingabefeld programmatisch. Der Benutzer kann dies über die Schaltfläche "next" tun, aber gibt es eine Möglichkeit, dies automatisch zu tun?

Ich weiß, dass die focus() Auslöser einige Einschränkungen auf ios hat, aber ich habe auch eine gewisse Abhilfe mit synthetisierten Klicks usw.

Quelle

2013-09-10 David

etwas Glück diese den Weg zur Arbeit? –

ich eine Abhilfe gefunden gesehen, die für Sie arbeiten könnte.

Apparently IOS/Safari "akzeptiert" nur den Fokus, wenn sich ein Touch-Ereignishandler befindet. Ich löste ein Berührungsereignis aus und steckte das .focus() darin ein. Ich habe versucht, diese auf meinem iPhone3S und iPhone5S mit Safari und es funktioniert:

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
(Presse nächste Taste in Demo)

Quelle

2013-09-10 21:34:04 Sergio

Dies funktioniert, weil Ihr Start-Ereignis ein Klick (Mausereignis) ist. Wenn Sie versuchen, ein anderes Ereignis als Start-Ereignis (neben Mausereignissen) zu verwenden, wird es nicht funktionieren. Dieser Link kann helfen: http://www.quora.com/Mobile-Safari-iPhone-oder-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard – darkyndy

@darkyndy Does it Ist es wichtig, ob das "Start" -Klick-Ereignis echt ist oder ob es in Ordnung ist, wenn es ausgelöst wird? – Wytze

@Wytze - von dem, was ich gesehen habe es wichtig ist, muss ein echtes Ereignis sein (Benutzerinteraktion) – darkyndy

-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>

Quelle

2014-05-22 08:34:35

programmatisch in einem zum nächsten Eingabefeld bewegen Mobile Browser ohne die Tastatur zu entlassen scheint unmöglich zu sein. (Dies ist ein schreckliches Design, aber mit dem müssen wir arbeiten.) Ein cleverer Hack besteht darin, die Eingabeelementpositionen, Werte und Attribute mit Javascript zu vertauschen, so dass es so aussieht, als ob Sie tatsächlich zum nächsten Feld gehen Sie sind immer noch auf das gleiche Element konzentriert. Hier ist Code für ein jQuery-Plug-in, das die Werte id, name und Wert tauscht. Sie können es anpassen, um andere Attribute nach Bedarf auszutauschen. Stellen Sie außerdem sicher, dass alle registrierten Ereignishandler repariert werden.

$.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; 
};

Demo hier: http://jsfiddle.net/EbU6a/194/

Quelle

2014-06-12 12:57:28

Clever. Wenn Sie 'nextel.detach();' anstelle von 'nextel.remove();' verwenden, sind die Felder auch wiederverwendbar. ('remove()' entfernt auch die gebundenen Listener) – szupie

Dies funktioniert nicht, wenn Elemente zwischen den Eingaben liegen. Siehe http://jsfiddle.net/EbU6a/743/ – RubenSandwich

@RubenSandwich Ja, dieser Beispielcode trifft eine Reihe von Annahmen, aber er kann durch Aktualisieren von '.next()' und '.before () ', um das nächste Formularelement zu entfernen und es wieder einzufügen, wo immer es hingehört. –

ich diese Hoffnung ist, was Sie for-

$(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(); 
    } 
    }); 
});

Prüfcodes hier-

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

Quelle

2017-01-02 12:22:57 Kapilrc

-2

UIWebview hat suchen die Eigenschaft keyboardDisplayRequiresUserAction

Wenn diese Eigenschaft auf true festgelegt ist, muss der Benutzer explizit auf die Elemente in der Webansicht tippen, um die Tastatur (oder eine andere relevante Eingabeansicht) für dieses Element anzuzeigen. Bei Festlegung auf false bewirkt ein Fokusereignis für ein Element, dass die Eingabeansicht automatisch angezeigt und mit diesem Element verknüpft wird.

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

Quelle

2017-12-12 23:15:12 pkamb

Fokus programmatisch auf nächste Eingabefeld in der mobilen Safari

Antwort

Verwandte Themen