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

클리핑 마스크 사용에 대한 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 모두에서 작동하는 훌륭한 솔루션을 제공했습니다!

---

답변