टेक्स्ट इनपुट के क्षैतिज "स्क्रॉलिंग" को रोकें?

Question

मैं एचटीएमएल, सीएसएस और जेएस में प्रारूप इनपुट फ़ील्ड पर काम कर रहा हूं।

एक उदाहरण निम्नलिखित पैटर्न के साथ दिनांक प्रारूप फ़ील्ड होगा: **.**.****। जब मैं इनपुट फ़ील्ड में टाइप कर रहा हूं, तो जब मैं बॉक्स के अंत तक पहुंच जाता हूं तो क्रोम बाईं ओर "स्क्रॉल" करता है।

मैं इसे कैसे रोक सकता हूं?

लाइनों है कि प्रत्येक चार अलग एक पृष्ठभूमि छवि से बनते हैं। एक मोनोस्पेस्ड फ़ॉन्ट और एक सेट letter-spacing प्रत्येक चरित्र "फ़ील्ड" में जाता है। यदि आप इनपुट फ़ील्ड के आकार तक पहुंचते हैं तो यह आगे स्क्रॉल करता है और पृष्ठभूमि को इसके साथ ले जाता है।

इस समस्या को हल करने के लिए, मैंने इनपुट तत्व को एक div तत्व में रखा, div तत्व को चौड़ाई और अतिरिक्त सीमाओं और overflow: none; को div में सीमित किया। नतीजा: यह फ़ायरफ़ॉक्स में ठीक काम करता है, क्रोम अभी भी इनपुट सामग्री को बाईं ओर स्क्रॉल करता है।

क्या मैं यह गलत कर रहा हूं? क्या इसके लिए कोई दूसरा समाधान है? क्या इसे रोकने के लिए कोई वेबकिट संपत्ति है? आपका अग्रिम में ही बहुत धन्यवाद!

Answer 1

वेबकिट आपको टाइप करने के लिए ऊँची एड़ी के ऊपर सिर चला जाता है, भले ही आप सीएसएस ट्रांसफॉर्मेशन करते हैं, यह टेक्स्ट इनपुट कैरेट को छिपाएगा।

यह आपके द्वारा टाइप किए जा रहे छिपाने के लिए भी खराब उपयोगकर्ता अनुभव है, यह बहुत निराशाजनक होगा और आपको नहीं पता होगा कि आपने इसे सही टाइप किया है या नहीं।

मैं पात्रों की राशि आप इस तरह के रूप में प्रत्येक क्षेत्र, में डाल सकते हैं सीमित करने के लिए सुझाव है कि ...

<input type="text" maxlength="20" /> 

अपने वास्तव में पात्रों में से एक मनमाना राशि की जरूरत है, तो आप KeyUp घटना को सुन सके और मैदान पर और फिर गतिशील रूप से बढ़ो।

Answer 2

रैपर के साथ सलाह के लिए धन्यवाद, मुझे फ़ायरफ़ॉक्स में एक ही समस्या थी। क्रोम में मैंने इसे जेएस और स्क्रोल लाइफ विधि का उपयोग करके तय किया है (जो दूसरी तरफ एफएफ में काम नहीं करेगा)। jQuery में: $('input').live('keyup', function() { $(this).parent().scrollLeft(0); }); ...

Answer 3

मैं एक ही मुद्दा था और एक सीएसएस समाधान नहीं मिला:

<style> 
    #input-wrapper { 
    border: 1px solid #C9CFD5; 
    background-image: url('grid.png'); /* some tile image for the vertical lines */ 
    width: 200px; 
    height: 50px; 
    overflow: hidden; 
    } 
    #input-wrapper input { 
    border: 0 none; 
    width: 400px; 
    height: 50px; 
    background: transparent; 
    font-size: 30px; 
    font-family: "Courier", monospace; 
    letter-spacing: 28px; 
    text-indent: 18px; 
    } 
</style> 
<div id="input-wrapper"> 
    <input type="text" maxlength="4" length="4" value="1234" /> 
</div> 

मज़ा!

Answer 4

मैं निम्नलिखित समाधान का प्रयोग किया:

एचटीएमएल

<div id="input-wrapper"> 
    <div id="input-grid"> 
    <input type="text" id="targa" maxlength="5" length="5" value="" /> 
</div> 

जे एस

jQuery(document).ready(function($){ 
    $('#targa').on('keypress', function() { 
    if (this.value.length >= 4){ 
     return false; 
    } 
    }); 
}); 

सीएसएस

#input-wrapper { 
     position: relative; 
    } 
    #input-grid{ 
    border: 1px solid #C9CFD5; 
    background-image: url('../images/input-mask.jpg'); 
    width: 200px; 
    height: 50px; 
    } 
    #targa { 
    color:#fff; 
    text-transform:uppercase; 
    border: 0 none; 
    width: 400px; 
    height: 50px; 
    background: transparent; 
    font-size: 30px; 
    font-family: "Courier", monospace; 
    letter-spacing: 28px; 
    text-indent: 18px; 
    outline: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

jsfiddle live example

jsfiddle live example (full screen)