텍스트 상자에 마지막 숫자를 입력하면 첫 번째 숫자가 들어갑니다.

마지막 숫자 를 입력하면 첫 번째 숫자 가 안으로 들어가고 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 번째 문자를 입력 한 후 입력 커서를 입력 시작 부분으로 강제합니다. 또한 필드에 blur ()를 추가하여 처음으로 커서 점프가 튀어 나오지 않도록했습니다.

타임 아웃도 필요합니다. 그것이 없으면 입력 한 문자가 처음에 삽입됩니다. 시간 초과에 대한 추가 정보 : setTimeout이 자바 스크립트로 비동기 기능을 수행하는 좋은 솔루션입니까?

입력 상자에 js onkeyup의 blur () 이벤트를 추가하여 처리 할 수 ​​있습니다.

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를 사용 하여이 문제를 테스트했으며 텍스트 영역 바깥 쪽을 클릭하면 (초점을 잃어도) 첫 번째 숫자가 다시 나타나지 않거나 텍스트 입력에서 문자열이 다시 정상으로 돌아갑니다.

나는 문제가 당신이 설정 한 문자 간격 CSS 속성 letter-spacing: 31px;이라고 생각합니다. Chrome을 사용하면 초점을 잃을 때 이것을 제거하는 것처럼 보이지만 Firefox는 초점을 잃은 후에도 이것을 유지합니다.

첫 번째 해결책은 수동으로 blur () 함수를 호출하여 입력의 포커스를 잃는 것입니다. 이것은 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. 입력의 문자 간격 속성의 인라인 스타일을 다른 값으로 변경하십시오 (문서의 스타일 섹션에서 전체 스타일 태그를 다시 작성하는 등 많은 노력없이 프로그래밍 방식으로 number_text의 CSS 클래스를 편집 할 수 없으므로).
2. 입력에서 Class number_text를 제거하십시오.
   • 1과 2는 상호 교환이 가능하므로 클래스 속성을 '메모리에'저장하지 않고 Firefox가 설정 한 인라인 스타일로 대체됩니다.
3. 인라인 스타일을 제거하고 number_text CSS 클래스를 다시 적용하십시오. 그러면 브라우저가 필요에 따라 문자 분할을 다시 계산해야합니다.

코드에서는 다음 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으로 늘리면 좋을 것입니다.

또한 비표준 시스템, 특히 대체 글꼴 또는 크기 속성을 가진 접근성 시스템을 더 잘 수용 할 수 있습니다. 영역에 전체 너비 공간을 입력하여 너비를 감지하고 마지막에 1/4 너비 공간을 추가하고 측정 한 다음 삭제하면 사용자가 입력 할 때 전체 너비 공간을 덮어 쓰기 위해 단순히 장비를 조작하거나 데이터를 입력 할 때 키보드 또는 한 번에 한 문자 씩 입력되는 것으로 가정하지 마십시오.