2013-09-10 11 views
23

में अगले इनपुट क्षेत्र पर ध्यान केंद्रित मैं लाइन है कि एक वर्ग जवाब लाइन की तरह काम करता में कई इनपुट फ़ील्ड है: यह हैप्रोग्राम मोबाइल सफारी

enter image description here

प्रत्येक वर्ग है स्वयं के इनपुट क्षेत्र। इसका कारण अन्य चीजों के बीच है जो कभी-कभी एक वर्ग पूर्व-जनसंख्या वाला हो सकता है। अब, डेस्कटॉप ब्राउज़र पर कर्सर अगले इनपुट फ़ील्ड पर कूदता है जब भी कोई char दर्ज होता है। यह वास्तव में अच्छी तरह से की तरह कुछ का उपयोग कर काम करता है:

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

लेकिन मोबाइल सफारी (हम ios पर परीक्षण) पर समस्या यह है कि मैं नहीं जानता कि कैसे आप अगले इनपुट क्षेत्र प्रोग्राम के लिए "कूद करने के लिए"। उपयोगकर्ता इसे "अगला" बटन के माध्यम से कर सकता है, लेकिन क्या यह स्वचालित रूप से ऐसा करने का कोई तरीका है?

मैं जानता हूँ कि focus() ट्रिगर ios पर कुछ सीमाएँ हैं कि, लेकिन मैं भी कुछ संश्लेषित क्लिक्स आदि का उपयोग कर वैकल्पिक हल देखा है

+0

किसी भी भाग्य इस काम करने के लिए हो रही है? –

उत्तर

25

मैं एक समाधान है कि आप के लिए काम कर सकते हैं पाया।

Apparently आईओएस/सफारी केवल टच इवेंट हैंडलर के अंदर फोकस स्वीकार करता है। मैंने एक स्पर्श कार्यक्रम शुरू किया और इसके अंदर .focus() डाला। मैं अपने iPhone3S और सफारी के साथ iPhone5S पर इस की कोशिश की और यह काम करता है:

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

डेमो here
(डेमो में प्रेस अगला बटन)

+8

यह काम करता है क्योंकि आपका स्टार्ट इवेंट एक क्लिक (माउस इवेंट) है। यदि आप प्रारंभिक घटना (माउस ईवेंट के अलावा) के रूप में अन्य ईवेंट का उपयोग करने का प्रयास करते हैं तो यह काम नहीं करेगा। इस कड़ी में मदद कर सकते हैं: http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard – darkyndy

+1

@darkyndy यह करता है कोई फर्क नहीं पड़ता कि "प्रारंभ" क्लिक इवेंट वास्तविक है या यह ट्रिगर होने पर ठीक है? – Wytze

+0

@Wytze - मैं क्या देखा है से यह मायने रखता है, एक वास्तविक घटना (उपयोगकर्ता संपर्क) होना चाहिए – 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> 
7

प्रोग्राम एक में अगले इनपुट क्षेत्र में जाने कीबोर्ड को खारिज किए बिना मोबाइल ब्राउजर असंभव प्रतीत होता है। (यह भयानक डिज़ाइन है, लेकिन यही वह है जिसके साथ हमें काम करना है।) हालांकि, एक चालाक हैक इनपुट तत्व पदों, मानों और जावास्क्रिप्ट के साथ विशेषताओं को स्वैप करना है ताकि ऐसा लगता है कि आप अगले क्षेत्र में जा रहे हैं जब वास्तव में आप अभी भी एक ही तत्व पर केंद्रित हैं। यहां एक jQuery प्लग-इन के लिए कोड है जो id, name और मूल्य को स्वैप करता है। आप इसे आवश्यकतानुसार अन्य विशेषताओं को स्वैप करने के लिए अनुकूलित कर सकते हैं। किसी भी पंजीकृत घटना हैंडलर को ठीक करना सुनिश्चित करें।

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

यहाँ डेमो: http://jsfiddle.net/EbU6a/194/

+1

चालाक। यदि आप 'nextel.detach();' nextel.remove(); 'के बजाय 'nextel.detach();' का उपयोग करते हैं, तो फ़ील्ड भी पुन: प्रयोज्य हो जाएंगी। ('हटाएं() 'बाध्य श्रोताओं को भी हटा देता है) – szupie

+0

इनपुट के बीच तत्व होने पर यह काम नहीं करता है। Http://jsfiddle.net/EbU6a/743/ – RubenSandwich

+0

@ रूबेन सैंडविच हां देखें, यह नमूना कोड कई मान्यताओं को बनाता है, लेकिन इसे '.next() 'और' .before (अपडेट करके) किसी भी स्थिति में तत्वों के लिए अनुकूलित किया जा सकता है।) 'अगले फॉर्म तत्व को हटाने के लिए और उसे जहां भी जाना है उसे दोबारा डालें। –

0

मैं इस आशा है कि तुम क्या तक- और

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

जांच कोड देख रहे हैं यहाँ

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

-2

UIWebView संपत्ति है keyboardDisplayRequiresUserAction

जब यह संपत्ति true पर सेट की जाती है, तो उपयोगकर्ता को उस तत्व के लिए कीबोर्ड (या अन्य प्रासंगिक इनपुट दृश्य) प्रदर्शित करने के लिए वेब दृश्य में तत्वों को स्पष्ट रूप से टैप करना होगा। जब false पर सेट किया जाता है, तो किसी तत्व पर फ़ोकस ईवेंट इनपुट दृश्य को प्रदर्शित करने और स्वचालित रूप से उस तत्व से संबद्ध होने का कारण बनता है।

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

संबंधित मुद्दे