หมายเลขแรกจะเข้าไปข้างในเมื่อพิมพ์หมายเลขสุดท้ายลงในกล่องข้อความ

เมื่อฉันพิมพ์หมายเลขสุดท้ายในที่หมายเลขแรกไปภายใน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" >

ช่วยฉันออกจากปัญหานี้ ขอบคุณ

เพิ่มที่ว่างสำหรับหมายเลขอื่นและคลิปอินพุตที่ใช้ 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">

ใช้รหัสนี้ มันทำงานได้ดี

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>

ลองเพิ่มสคริปต์นี้ให้ป้อนข้อมูลในฟิลด์:

<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 ฉันยังเพิ่มการเบลอ () ลงในฟิลด์เพื่อให้เคอร์เซอร์ข้ามไปที่จุดเริ่มต้นไม่ติด

หมดเวลายังเป็นสิ่งจำเป็น หากไม่มีมันอักขระที่ป้อนจะถูกแทรกที่จุดเริ่มต้น เพิ่มเติมเกี่ยวกับการหมดเวลา: setTimeout เป็นโซลูชันที่ดีสำหรับการทำงานกับ async กับ javascript หรือไม่

คุณสามารถจัดการกับมันโดยการเพิ่มเหตุการณ์เบลอ () ของ 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/>

กรุณาเปลี่ยน css ด้านล่าง (มันจะใช้งานได้)

padding-left: 14px;

ถึง

padding-left: 5px;

ดังนั้นฉันชอบคำตอบของ Temani Afif เกี่ยวกับการใช้มาสก์รูปวาด คิดว่ามันยอดเยี่ยม ฉันต้องการเสนอวิธีแก้ปัญหาอื่น (สง่างามน้อยกว่าเล็กน้อย) ฉันใช้ Firefox เพื่อทดสอบปัญหานี้และการคลิกที่นอกพื้นที่ข้อความ (ไม่ได้โฟกัส) จะไม่ทำให้ตัวเลขที่ 1 ปรากฏขึ้นอีกครั้งหรือสตริงกลับไปเป็นปกติในการป้อนข้อความที่นั่น

ฉันเชื่อว่าปัญหาคือตัวอักษร css ที่คุณตั้งไว้:letter-spacing: 31px;และความจริงที่ว่าฉันเชื่อว่านี่จะใช้กับเครื่องหมายตก "กะพริบ" ที่เบราว์เซอร์ส่วนใหญ่มี การใช้ Chrome ดูเหมือนว่าจะลบสิ่งนี้เมื่อไม่มีการโฟกัสในขณะที่ Firefox ยังคงรักษาสิ่งนี้ไว้แม้จะไม่ได้โฟกัส

วิธีที่หนึ่งคือใช้การเรียกฟังก์ชั่นเบลอ () ด้วยตนเองเพื่อให้อินพุตสูญเสียโฟกัส สิ่งนี้ใช้ได้ใน Chrome (โดยใช้ฟังก์ชั่นไม่ระบุชื่อซึ่งทำงานด้วยตนเอง):

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

หรือแม้กระทั่งเป็นฟังก์ชั่นที่กำหนดเรียกโดยอินพุต number_text ดังนี้:

<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()" ... >

คุณจะสังเกตเห็นความล่าช้าเล็กน้อยใน Chrome แต่การเรียกสิ่งนี้ใน Firefox จะไม่สามารถแก้ไขปัญหาได้

เราสามารถบังคับพฤติกรรมนี้ใน Firefox ได้ หลังจากเล่นไปแล้วฉันคิดว่า Chrome กำลังรีเฟรช / คำนวณระยะห่างของตัวอักษรใหม่บนความเบลอ เซสชันการเล่นของฉันแสดงให้เห็นว่าคุณสามารถบังคับให้ Firefox คำนวณค่านี้ใหม่โดยทางโปรแกรม:

1. เปลี่ยนรูปแบบอินไลน์ของแอตทริบิวต์การเว้นวรรคตัวอักษรของอินพุตเป็นค่าอื่น (เนื่องจากเราไม่สามารถแก้ไขคลาส CSS ของ number_text โดยทางโปรแกรมโดยไม่ต้องใช้ความพยายามมากเช่นการเขียนแท็กสไตล์ทั้งหมดในส่วนสไตล์ของเอกสาร)
2. ลบคลาส number_text ออกจากอินพุต
   • 1 และ 2 สามารถใช้แทนกันได้คุณต้องใช้ Firefox เพื่อย้อนกลับไปสู่รูปแบบอินไลน์ที่คุณตั้งไว้โดยไม่ต้องบันทึกแอตทริบิวต์ของคลาส 'ในหน่วยความจำ'
3. ลบ inline-style และนำคลาส CSS number_text ไปใช้ใหม่ สิ่งนี้จะบังคับให้เบราว์เซอร์คำนวณการแยกจดหมายตามที่เราต้องการ

ในรหัสมันจะดูเหมือนฟังก์ชั่น JavaScript ต่อไปนี้:

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

มันจะมีการสั่นไหวเหมือนกันใน Firefox เช่นเดียวกับ Chrome และทุกอย่างจะดี

หมายเหตุ : ฟังก์ชั่นการหมดเวลาคือการให้เวลาเบราว์เซอร์ในการรีเฟรชและปรับปรุงสิ่งที่เราต้องการ

หมายเหตุ : คุณสามารถเลือกที่จะโทร. blur () ในฟังก์ชั่นเพื่อทำให้กล่องข้อความเสียโฟกัสหรือตัดออกและพวกเขาจะยังคงอยู่ในช่องป้อนข้อมูลโดยไม่มีข้อผิดพลาดกับตัวเลข

หวังว่าสิ่งนี้จะช่วยให้คุณเข้าใจความคิดรวบยอดรวมถึงการแก้ไขปัญหา บุคคลอื่นให้คำตอบที่ดีซึ่งหลีกเลี่ยงการสั่นไหวทั้งหมดและทำงานได้ทั้ง Firefox และ Chrome!

ดูเหมือนปัญหา UI ทั่วไปที่ฉันเคยพบมาก่อน

ฉันเดิมพันว่ามันจะล้มเหลวในบางแพลตฟอร์มเช่นกัน (นี่คือลักษณะของข้อผิดพลาดนี้โดยเฉพาะ)

ในบางแพลตฟอร์มจะใช้อักขระเว้นวรรคเพื่อระบุเครื่องหมายรูปหมวก

ในบางแพลตฟอร์ม แต่ไม่ใช่ทั้งหมดตัวละครนี้ไม่ใช่การเว้นวรรค แต่มีการซ้อนทับในอักขระถัดไปไม่ใช่อักขระสุดท้าย ดังนั้นหากไม่มีตัวละครถัดไปจะเต็มไปด้วยช่องว่างจนกว่าจะมีการป้อนข้อมูล

ในทั้งสองกรณีจอแสดงผลจะทำงานในลักษณะนี้

นี่เป็นกรณีที่ทางออกที่ดีที่สุดคือวิธีที่ง่ายที่สุดรองรับระบบที่แปลกประหลาดนี้ไม่ใช่วิธีแก้ปัญหาที่บังคับให้มันทำงานในแบบที่คุณต้องการตามที่บางคนแนะนำ สิ่งนี้มีโอกาสน้อยที่จะแนะนำบั๊กและมีแนวโน้มที่จะทำงานบนทุกแพลตฟอร์ม

วิธีแก้ปัญหาคือให้พื้นที่ว่างเล็กน้อยในตอนท้ายของรายการเพื่อแสดงสิ่งนี้

เพิ่ม " ความกว้าง " เป็น 230 หรือ 240 และคุณควรจะดี

นอกจากนี้คุณยังสามารถรองรับระบบที่ไม่ได้มาตรฐานโดยเฉพาะอย่างยิ่งระบบช่วยการเข้าถึงที่มีแบบอักษรทางเลือกหรือคุณลักษณะขนาดโดยเพียงแค่ตรวจจับความกว้างโดยป้อนช่องว่างความกว้างเต็มในพื้นที่เพิ่มพื้นที่ความกว้างไตรมาสที่สิ้นสุด พวกเขาหรือเพียงแค่สวมมันเพื่อเขียนทับช่องว่างแบบเต็มความกว้างเมื่อผู้ใช้พิมพ์ (หรือป้อนข้อมูลอย่าคิดว่าเป็นแป้นพิมพ์หรือแม้แต่สิ่งที่ป้อนอักขระหนึ่งตัวในแต่ละครั้ง)