टेक्स्ट-बॉक्स में आखिरी नंबर टाइप करते ही पहला नंबर अंदर चला जाता है

Question

जब मैं अंतिम संख्या टाइप करता हूं , तो पहली संख्या अंदर जाती है text-box(यह गायब हो जाती है), यह एक अतिरिक्त स्थान जोड़ रहा है।

मैं बाहर क्लिक करने के बाद text-boxयह अच्छा लग रहा है जो मुझे पिछले चरित्र टाइपिंग के दौरान चाहिए।

  #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" >

इस मुद्दे से निकलने में मेरी मदद करें। धन्यवाद

Comments

क्षमा करें, लेकिन मुझे इस मुद्दे की समझ नहीं है?

— एवोल्यूशनबॉक्स

लगता है कि आपको अंतिम चरित्र के लिए कैरोट को संभालने के लिए इसे थोड़ा व्यापक बनाने की आवश्यकता है।

— स्वतंत्रता-मी

@evolutionxbox ने मुझे एक या दो मिनट का समय दिया ... स्निपेट मुद्दे को अच्छी तरह से प्रदर्शित करता है - यह बड़े पत्र-रिक्ति के साथ एक इनपुट बॉक्स है। इनपुट के अंत में क्लिक करें और टाइप करें - यह 6 पर बंद हो जाता है, लेकिन 1(पहले वर्ण) इनपुट के बाईं ओर खो जाता है (छिपे हुए ओवरफ्लो के साथ स्क्रॉल किया गया)।

— स्वतंत्रता-मी

एक ही मुद्दा, लेकिन कोई जवाब नहीं जो वर्तमान क्रोम (कम से कम) में काम करता है: stackoverflow.com/questions/8961045/…

— स्वतंत्रता-एम

मैं 6 अलग-अलग inputनियंत्रणों का उपयोग करने का सुझाव देता हूं और उनके बीच के कैरेट को एक चरित्र के रूप में टाइप / हटा दिया जाता है। अन्यथा आप हमेशा ब्राउजर / फॉन्ट साइज / जूम लेवल आदि के बीच अलाइनमेंट इश्यू करते

— रहेंगे

Answer 1

किसी अन्य नंबर के लिए स्थान जोड़ें और इनपुट का उपयोग करके क्लिप करें clip-path

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom/100% 1px no-repeat;
  width: 260px;
  clip-path:polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 100%, 0 100%);
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

या पृष्ठभूमि-आकार को कम करके क्लिप-पथ के बिना:

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom left/calc(100% - 38px) 1px no-repeat;
  width: 260px;
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

Comments

पहले ठीक काम कर रहा है, दूसरे में सूचक दिखाई दे रहा है।

— जिग्नेश पांचाल

@ जिग्नेशपांचल मुझे पता है, मैंने दो अलग-अलग विचार दिए। हो सकता है कि किसी को कर्सर दिखाई देना चाहता हो

— Temani Afif

और पहले समाधान में ~ क्लिप-पाथ ~ सभी ब्राउज़र में काम नहीं करेगा।

— जिग्नेश पांचाल

@ जिग्नेशपंचल जब तक आप मृत ब्रोसर का उपयोग नहीं कर रहे हैं, क्लिप-पथ सभी आधुनिक ब्राउज़रों द्वारा समर्थित है ( caniuse.com/#feat=css-clip-path )

— Temani Afif

Answer 2

इस कोड का उपयोग करें। अच्छी तरह से काम करते हैं

var container = document.getElementsByClassName("wrap")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 6);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
     else if (myLength <= maxLength)
      {
        prev=target.previousElementSibling;
         while (prev = prev) {
            if (prev == null)
                break;
            if (prev.tagName.toLowerCase() == "input") {
                prev.focus();
                break;
            }
        }
      }

    }

.wrap input {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #000;
            width: 3%;
            display: inline-block;
            outline: 0;
            text-align: center;
        }

<div class="wrap">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
    </div>

Comments

इस तरह के एक अच्छे समाधान के लिए धन्यवाद, लेकिन नंबर दर्ज करने के बाद नंबर निकालने के लिए बैकस्पेस का उपयोग करते समय यह समस्या है। यह समस्या एकल इनपुट पाठ में नहीं होगी।

— जिग्नेश पांचाल

इस कोड को अगरelse if (myLength <= maxLength) { prev=target.previousElementSibling; while (prev = prev) { if (prev == null) break; if (prev.tagName.toLowerCase() == "input") { prev.focus(); break; } } }

— Sreeraj_ms

@jigneshpanchalmj यदि आपका मुद्दा हल हो गया है तो मेरे उत्तर को सही बनाएं।

— रमीज बुखारी

यद्यपि यह प्लेसहोल्डर समस्या को हल करता है, लेकिन इस समाधान को उपयोग करने योग्य बनाने के लिए और अधिक कार्य की आवश्यकता होती है । जैसे 3rd इनपुट पर क्लिक करें और टाइप करें - 3rd में जाता है (हो सकता है कि आप क्या चाहते हैं) - फिर 2nd में क्लिक करें और दो बार एक अलग नंबर टाइप करें - 2nd में जाता है लेकिन 3rd इनपुट को नजरअंदाज कर दिया जाता है। इसलिए लेफ्ट-कर्सर बैक - कर्सर को अनदेखा किया जाता है (या अधिक विशेष रूप से उलटा)। शायद यह ठीक है, बस के रूप में बहुत अच्छा नहीं लग रहा है।

— स्वतंत्रता-एम

parseInt(target.attributes["maxlength"].value, 6);"6" डिफ़ॉल्ट नहीं है, यह

— 15-21 पर

Answer 3

इनपुट-फ़ील्ड में इस स्क्रिप्ट को जोड़ने का प्रयास करें:

<script>
  var oInput = document.getElementById('number_text');
  oInput.onkeypress = function(ev) {
    setTimeout(function() {
        if( oInput.value.length > 5 ) {
            oInput.setSelectionRange(0,0);
            oInput.blur();
        }
    }, 0);
  }
</script>

यह आपके इनपुट-कर्सर को 6 वें वर्ण में प्रवेश करने के बाद इनपुट की शुरुआत के लिए मजबूर करता है। मैंने फ़ील्ड में एक ब्लर () भी जोड़ा ताकि शुरुआत में कर्सर-जंप न चले।

टाइमआउट की भी जरूरत है। इसके बिना शुरुआत में प्रवेश किया हुआ चरित्र डाला जाएगा। टाइमआउट के बारे में और अधिक: क्या सेटटाइमआउट एक अच्छा समाधान है जावास्क्रिप्ट के साथ async कार्य करने के लिए?

Comments

यदि आप onkeyup ईवेंट का उपयोग करते हैं तो शायद आप सेटटाइमआउट से छुटकारा पा सकते हैं।

— जोनास एबरले

कीप फ़्लिकरिंग का कारण बनेगा क्योंकि यह कुंजी "अप" पर फायर करता है

— जुरा हर्बर

Answer 4

आप इनपुट बॉक्स के js onkeyup के कलंक () घटना को जोड़कर इससे निपट सकते हैं:

myFunction=()=>{
if(document.getElementById("number_text").value.length===6)
document.getElementById("number_text").blur();
}

 #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
        overflow-y:hidden;
        overflow-x:hidden;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" onkeyup="myFunction()" >
<br/>

Comments

अंतिम संख्या दर्ज करते समय यह कुछ समय के लिए सभी नंबरों को स्थानांतरित करता है।

— जिग्नेश पांचाल

Answer 5

कृपया नीचे सीएसएस पर बदलें (यह काम करेगा)

padding-left: 14px;

सेवा

padding-left: 5px;

Comments

लेकिन यह संख्या की सीमा के नीचे डिजाइन में समस्या है। और संख्या सीमा का केंद्र नहीं लगती है।

— जिग्नेश पांचाल

Answer 6

इसलिए मुझे क्लिपिंग मास्क का उपयोग करने के बारे में टेमानी आफिफ़ का जवाब पसंद है। सोचो यह बहुत अच्छा है। मैं एक और समाधान (थोड़ा कम सुरुचिपूर्ण) प्रस्तावित करना चाहता था। मैंने इस समस्या का परीक्षण करने के लिए फ़ायरफ़ॉक्स का उपयोग किया, और पाठ क्षेत्र के बाहर क्लिक करने (फ़ोकस खोने) से 1 अंक फिर से प्रकट नहीं होता है या स्ट्रिंग वापस पाठ इनपुट में सामान्य हो जाती है।

मेरा मानना ​​है कि मुद्दा यह है कि सीएसएस रिक्ति सीएसएस विशेषता आपके द्वारा निर्धारित की गई है: letter-spacing: 31px;और इस तथ्य पर कि मेरा मानना ​​है कि यह "ब्लिंकिंग" के लिए लागू होगा जो कि अधिकांश ब्राउज़रों के पास है। Chrome का उपयोग करना, फ़ोकस खोने पर इसे हटाने के लिए लगता है, जबकि फ़ायरफ़ॉक्स फोकस को खोने के बाद भी इसे बरकरार रखता है।

इनपुट को फ़ोकस करने के लिए 1 समाधान मैन्युअल रूप से ब्लर () फ़ंक्शन को कॉल करने के लिए उपयोग करना था। क्रोम में यह काम करता है (सेल्फ-एक्ज़ीक्यूटिंग एनोनिमस फ़ंक्शन का उपयोग करके):

<input type="text" id="number_text" maxlength="6" onkeyup="(function()
    {
      var x = document.getElementById('number_text');
      let value = x.value
      if (value.length >= 6){
        x.blur()
        return false
      }
    })();"
 pattern="\d{6}" value="1234" >

या यहां तक ​​कि जैसे नंबर_टेक्स्ट इनपुट द्वारा परिभाषित एक परिभाषित फ़ंक्शन:

<script>
 handleMaxInput = function(){
  var x = document.getElementById('number_text');
  let value = x.value
  if (value.length >= 6){
    x.blur()
    return false
  }
};
</script>

<input ... id='number_text' ... onkeyup="handleMaxInput()" ... >

आपको क्रोम में थोड़ी देरी दिखाई देगी, लेकिन फ़ायरफ़ॉक्स में कॉल करने से समस्या हल नहीं होगी।

हम अनिवार्य रूप से फ़ायरफ़ॉक्स में इसी व्यवहार को बाध्य कर सकते हैं। कुछ खेलने के बाद, मुझे लगा कि क्रोम रिफ्रेश हो रहा है / ब्लर पर अक्षर रिक्ति को फिर से जोड़ रहा है। मेरे खेलने के सत्र से पता चला कि आप फ़ायरफ़ॉक्स को इस मान को प्रोग्रामेटिक रूप से रिकॉल करने के लिए मजबूर कर सकते हैं:

1. इनपुट के अक्षर-रिक्ति विशेषता की इनलाइन शैली को एक अलग मान में बदलें (क्योंकि हम क्रमिक रूप से बहुत प्रयास किए बिना क्रम संख्या के एक CSS वर्ग को संपादित नहीं कर सकते हैं, जैसे कि दस्तावेज़ के शैली अनुभाग में संपूर्ण शैली टैग को फिर से लिखना)।
2. इनपुट से क्लास नंबर_टेक्स्ट निकालें।
   • 1 और 2 विनिमेय हैं, आपको फ़ायरफ़ॉक्स को केवल उस इनलाइन शैली में वापस लाने की आवश्यकता है, जिसे 'मेमोरी में' सहेजे जाने के बिना क्लास की विशेषताओं के बिना सेट किया गया है।
3. इनलाइन शैली को हटा दें और नंबर_टेक्स्ट सीएसएस वर्ग को फिर से अप्लाई करें। यह ब्राउजर को लेटर-सेपरेशन को रिकॉल करने के लिए मजबूर करेगा क्योंकि हमें इसकी जरूरत है।

कोड में, यह निम्न जावास्क्रिप्ट फ़ंक्शन की तरह दिखेगा:

handleMaxInput = function(){
        var x = document.getElementById('number_text');
        let value = x.value
        if (value.length >= 6){ // if the input is 6 or more characters
              x.classList.remove('number_text') // remove the class
              x.style.letterSpacing = '0px' // reset the spacing
              setTimeout(function() { // set time to let browser refresh updates
                  x.classList.add('number_text') // Re-add class after browser refresh
                  setTimeout(function() { // Remove inline-style after more reculculations
                      x.style.removeProperty('letter-spacing') // Remove inline style to let class styles apply
                      x.blur // optional, will force input field to lose focus. Else comment out to avoid that.
              }, (1)); // waits 1 millisecond
          }, (1)); // waits 1 millisecond
        }
    }

इसमें क्रोम के साथ फ़ायरफ़ॉक्स में वही झिलमिलाहट होगी, और सब ठीक हो जाएगा।

नोट : टाइमआउट फ़ंक्शन ब्राउज़र को ताज़ा करने के लिए समय देने के लिए हैं, और वास्तव में हमें जो आवश्यक है उसे अपडेट करें।

नोट : आप टेक्स्ट बॉक्स को फ़ोकस बनाने के लिए फ़ंक्शन में .blur () कॉल करना चुन सकते हैं, या इसे छोड़ सकते हैं और वे फिर भी अंकों के साथ त्रुटि के बिना इनपुट फ़ील्ड में रहेंगे।

आशा है कि यह आपकी वैचारिक समझ के साथ-साथ समस्या को हल करने में मदद करता है। कुछ अन्य व्यक्तियों ने अच्छे समाधान दिए जो पूरी झिलमिलाहट से बचते हैं, और फ़ायरफ़ॉक्स और क्रोम दोनों में काम करते हैं!

Answer 7

यह एक आम यूआई मुद्दे की तरह दिखता है जो मैंने पहले सामना किया है।

मुझे यकीन है कि यह केवल कुछ प्लेटफार्मों पर भी विफल रहता है (यह इस विशेष बग की प्रकृति है।)

कुछ पर, लेकिन सभी नहीं, प्लेटफ़ॉर्म, एक रिक्ति वर्ण का उपयोग कैरेट को इंगित करने के लिए किया जाता है।

कुछ, लेकिन सभी नहीं, प्लेटफार्मों पर, यह चरित्र गैर-रिक्ति है, लेकिन ओवरलेइंग, अगले पर, अंतिम नहीं, चरित्र। इसलिए यदि कोई अगला वर्ण नहीं है, तो जब तक इनपुट नहीं हो जाता, तब तक वह स्थान से भरा रहेगा।

इन दोनों मामलों में प्रदर्शन इस तरीके से कार्य करेगा।

यह एक ऐसा मामला है जहां सबसे अच्छा समाधान सबसे सरल समाधान है, इस सामान्य प्रणाली क्विक के लिए समायोजित करना, न कि समाधान जो इसे उस तरह से व्यवहार करने के लिए मजबूर करता है जैसा आप चाहते हैं कि कुछ लोग सुझाए। इससे बगों को लागू करने की संभावना कम है, और सभी प्लेटफार्मों पर काम करने की अधिक संभावना है।

यह प्रदर्शित करने के लिए प्रवेश के अंत में समाधान थोड़ा अतिरिक्त कमरे देता है।

" चौड़ाई " को 230 या 240 तक बढ़ाएं और आपको अच्छा होना चाहिए।

इसके अलावा, आप गैर-मानक प्रणालियों को बेहतर तरीके से समायोजित कर सकते हैं, विशेष रूप से वैकल्पिक फोंट या आकार विशेषताओं के साथ एक्सेसिबिलिटी सिस्टम, क्षेत्र में पूर्ण चौड़ाई वाले स्थानों में प्रवेश करके, चौड़ाई का पता लगाकर, अंत में एक चौथाई चौड़ाई का स्थान जोड़कर, उन्हें मापकर, फिर हटाकर उन्हें, या केवल उपयोगकर्ता प्रकार (या अन्यथा डेटा में प्रवेश करता है) के रूप में पूर्ण चौड़ाई रिक्त स्थान को अधिलेखित करने के लिए यह हेराफेरी कर रहा है, मान लें कि यह एक कुंजीपटल या ऐसा कुछ भी नहीं है जो एक समय में एक वर्ण में प्रवेश करता है।)

Answer 8

$(document).on('keyup','#numberinput',function(){
    		var aa = $(this).val();

    		var aa = aa.substring(1);

    		if(aa.length > 5)
    		{
    			$('#numberinput').val(aa);
    		}
    	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" id="numberinput">