आईओएस सफारी 8 इनपुट ओवरफ्लो स्क्रॉल

Question

मुझे मोबाइल सफारी, संस्करण 8.1 पर फॉर्म फ़ील्ड्स के साथ कोई समस्या है। मोबाइल पर सफारी 8 के सभी संस्करणों के साथ यह एक बग प्रतीत होता है।

जब आप किसी इनपुट में टेक्स्ट टाइप करते हैं और वह टेक्स्ट इनपुट के मुकाबले लंबा होता है, तो कर्सर सही टाइप करते समय सही चलता रहता है - यह सही है। समस्या यह है कि जब आप चुनते हैं और छिपे हुए पाठ पर बाएं स्थानांतरित करने का प्रयास करते हैं, तो आप स्क्रॉल नहीं कर सकते हैं। इसी तरह, यदि आप इनपुट के बाहर चयन करते हैं, तो आप छुपा पाठ देखने के लिए दाएं स्क्रॉल नहीं कर सकते हैं।

आपकी एकमात्र पसंद सभी का चयन करना और हटाना है।

इस समस्या के लिए कोई समाधान? मैंने विभिन्न इनपुट प्रकारों के साथ एक नमूना पृष्ठ अपलोड किया है, व्यवहार उन सभी में मौजूद है।

फिडल: http://jsfiddle.net/b7kmxaL6/ (मोबाइल सफारी में जाएँ)

<form action=""> 
    <fieldset> 
     <input type="text" class="text"> 
     <input type="email" class="email"> 
     <input type="password" class="password"> 
    </fieldset> 
</form> 

Answer 1

मुझे लगता है मैं मोबाइल उपकरणों के लिए कोडिंग कर रहा हूँ एक वेब अनुप्रयोग में एक ही समस्या दिखाई दे रही है।

यदि आप अपनी होमस्क्रीन में वेबसाइट जोड़ते हैं, और इसे <meta name="apple-mobile-web-app-capable" content="yes"> के साथ सिर में चलाते हैं, तो समस्या दिखाई नहीं देती है: अब आप कैरेट को बाएं या दाएं किनारे पर ले जाकर इनपुट टेक्स्ट को स्क्रॉल कर सकते हैं इनपुट क्षेत्र।

Answer 2

यहां कुछ कोड है जो थोड़ा सा मदद करेगा। यदि आप <input type=text> के आकार से बड़े हिस्से का चयन कर रहे हैं तो पाठ का चयन इतना अच्छा नहीं होता है। सफारी और क्रोम में आईओएस 10.2 के साथ आईपैड पर परीक्षण किया गया।

var interval; 

$('#inputid').focus(function() { 
     var el=this,ratio=el.scrollWidth/el.value.length; 
     var inputwidthinchar=$(el).width()/ratio; 

     clearInterval(interval); 
     interval=setInterval(function(){ 
       var x=el.selectionStart,x2=el.selectionEnd,width=$(el).width(); 
       if ((width + 1) > el.scrollWidth) return; 
       var curposS=x-el.scrollLeft/ratio, 
        curposE=x2-el.scrollLeft/ratio, 
        tenper=inputwidthinchar*.1; 
       if (curposS > tenper && curposE < (inputwidthinchar-tenper)) return; // only if at edges; 
       if (curposS < tenper && curposE > (inputwidthinchar-tenper)) return; // if at both edges, don't do anything; 
       //center text - good for tapping on spot to be centered 
       //$(el).scrollLeft(x*ratio-(width/2)); 

       //scroll two char at a time - good for touch and hold at edge and more like expected function 
       if (curposS < tenper) 
         $(el).scrollLeft(el.scrollLeft-ratio*2); 
       else 
         $(el).scrollLeft(el.scrollLeft+ratio*2); 

       el.setSelectionRange(x, x2); //not working so well. 
     },100); 
}).blur(function(){ 
     clearInterval(interval); 
});