Số đầu tiên đi vào bên trong khi gõ số cuối vào hộp văn bản

Khi tôi nhập số cuối cùng vào, số đầu tiên sẽ vào bên trong text-box(nó biến mất), đó là thêm một khoảng trắng.

Sau khi tôi nhấp vào bên ngoài, text-boxnó trông có vẻ tốt mà tôi cần trong khi gõ ký tự cuối cùng.

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

Giúp tôi thoát khỏi vấn đề này. Cảm ơn

Thêm không gian cho một số khác và cắt đầu vào bằng cách sử dụng 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">

Hoặc không có đường dẫn clip bằng cách giảm kích thước nền:

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

Sử dụng mã này. công việc độc đáo của nó

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>

Cố gắng thêm tập lệnh này dưới trường đầu vào:

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

Cái này buộc con trỏ đầu vào của bạn bắt đầu đầu vào sau khi nhập ký tự thứ 6. Tôi cũng đã thêm một vệt mờ () vào trường để con trỏ nhảy về đầu sẽ không xuất hiện.

Thời gian chờ cũng là cần thiết. Không có nó, ký tự được nhập sẽ được chèn vào đầu. Tìm hiểu thêm về thời gian chờ: SetTimeout có phải là giải pháp tốt để thực hiện các chức năng không đồng bộ với javascript không?

Bạn có thể đối phó với nó bằng cách thêm một sự kiện mờ () của js onkeyup của hộp đầu vào:

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

Vui lòng thay đổi trên css bên dưới (nó sẽ hoạt động)

padding-left: 14px;

đến

padding-left: 5px;

Vì vậy, tôi thích câu trả lời của Temani Afif về việc sử dụng mặt nạ cắt. Hãy nghĩ rằng nó thật tuyệt. Tôi muốn đề xuất một giải pháp khác (một chút kém thanh lịch). Tôi đã sử dụng Firefox để kiểm tra vấn đề này và nhấp vào bên ngoài vùng văn bản (mất tiêu điểm) sẽ không làm cho chữ số 1 xuất hiện lại hoặc chuỗi trở lại bình thường trong kiểu nhập văn bản ở đó.

Tôi tin rằng vấn đề là thuộc tính css khoảng cách chữ bạn đặt: letter-spacing: 31px;và thực tế là tôi tin rằng điều này sẽ áp dụng cho dấu mũ "nhấp nháy" mà hầu hết các trình duyệt có. Sử dụng Chrome, nó dường như loại bỏ điều này khi mất tiêu điểm, trong khi Firefox vẫn giữ được điều này ngay cả sau khi mất tiêu điểm.

Giải pháp đầu tiên là sử dụng chức năng làm mờ thủ công () để làm cho đầu vào mất tiêu điểm. Điều này hoạt động trong Chrome (sử dụng Chức năng ẩn danh tự thực hiện):

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

hoặc thậm chí là một Hàm xác định được gọi bởi đầu vào number lòng như vậy:

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

Bạn sẽ nhận thấy một chút chậm trễ trong Chrome, nhưng gọi điều này trong Firefox sẽ không giải quyết được vấn đề.

Về cơ bản chúng ta có thể ép buộc hành vi tương tự trong Firefox. Sau một vài lần chơi xung quanh, tôi nhận ra rằng Chrome đang làm mới / tính toán lại khoảng cách chữ cái trên một vệt mờ. Phiên chơi của tôi cho thấy rằng bạn có thể buộc Firefox tính toán lại giá trị này theo chương trình:

1. Thay đổi kiểu nội tuyến của thuộc tính khoảng cách chữ cái của đầu vào thành một giá trị khác (vì chúng ta không thể chỉnh sửa một lớp CSS của numberSphere lập trình mà không cần nhiều nỗ lực, chẳng hạn như viết lại toàn bộ thẻ kiểu trong phần kiểu của tài liệu).
2. Loại bỏ lớp number lòng khỏi đầu vào.
   • 1 và 2 có thể hoán đổi cho nhau, bạn cần Firefox để dự phòng theo kiểu nội tuyến bạn đã đặt mà không lưu các thuộc tính lớp 'trong bộ nhớ'.
3. Loại bỏ kiểu nội tuyến và áp dụng lại lớp CSS numberSphere. Điều này sẽ buộc trình duyệt tính toán lại chữ cái khi chúng ta cần.

Trong mã, nó sẽ trông giống như hàm JavaScript sau:

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

Nó sẽ có cùng một nhấp nháy trong Firefox như với Chrome và tất cả đều ổn.

Lưu ý : Các chức năng hết thời gian là để cung cấp cho trình duyệt thời gian để làm mới và thực sự cập nhật những gì chúng ta cần.

Lưu ý : Bạn có thể chọn gọi .blur () trong hàm để làm cho hộp văn bản mất tiêu điểm hoặc bỏ qua điều đó và chúng sẽ vẫn ở trong trường nhập mà không gặp lỗi với các chữ số.

Hy vọng điều này sẽ giúp hiểu biết khái niệm của bạn, cũng như giải quyết vấn đề. Một số cá nhân khác đã đưa ra các giải pháp tốt để tránh toàn bộ sự cố nhấp nháy và hoạt động trong cả Firefox và Chrome!

Có vẻ như một vấn đề UI phổ biến mà tôi gặp phải trước đây.

Tôi cá là nó chỉ thất bại trên một số nền tảng (đây là bản chất của lỗi cụ thể này.)

Trên một số, nhưng không phải tất cả, các nền tảng, một ký tự khoảng cách được sử dụng để biểu thị dấu mũ.

Trên một số, nhưng không phải tất cả, các nền tảng, nhân vật này không phải là khoảng cách, nhưng lớp phủ, trên tiếp theo, không phải là cuối cùng, nhân vật. Do đó, nếu không có ký tự tiếp theo sẽ được lấp đầy khoảng trống cho đến khi nhập xong.

Trong cả hai trường hợp, màn hình sẽ hoạt động theo cách này.

Đây là một trường hợp trong đó giải pháp tốt nhất là giải pháp đơn giản nhất, phù hợp với sự giải quyết hệ thống chung này, không phải là giải pháp buộc nó phải hành xử theo cách bạn muốn như một số người đề xuất. Điều này ít có khả năng giới thiệu các lỗi và nhiều khả năng hoạt động trên tất cả các nền tảng.

Giải pháp là cung cấp một ít phòng dự phòng ở cuối mục để hiển thị điều này.

Tăng " chiều rộng " lên 230 hoặc 240 và bạn sẽ ổn.

Hơn nữa, bạn thậm chí có thể điều chỉnh tốt hơn các hệ thống không chuẩn, đặc biệt là các hệ thống trợ năng với các thuộc tính kích thước hoặc phông chữ thay thế, bằng cách chỉ cần phát hiện chiều rộng bằng cách nhập toàn bộ không gian chiều rộng trong khu vực, thêm một phần tư chiều rộng ở cuối, đo chúng, sau đó xóa chúng, hoặc chỉ đơn giản là sử dụng nó để ghi đè lên toàn bộ không gian chiều rộng khi người dùng nhập (hoặc nếu không nhập dữ liệu, đừng cho rằng đó là bàn phím hoặc thậm chí là thứ gì đó nhập vào một ký tự một lần.)