Javascript 在文本框中键入最后一个数字时，第一个数字会进入内部

当我在中键入最后一个数字时，第一个数字进入

文本框

（它消失），它增加了一个额外的空间

当我在

文本框外单击后，它看起来很好，这是我在键入最后一个字符时需要的。
#数字#u文本{
左侧填充：9px；
字母间距：31px；
边界：0；
背景图像：线性渐变（向右，#e170%，rgba（255，255，255，0）0%）；
背景位置：左下；
背景尺寸：38px 1px；
背景重复：重复-x；
宽度：220px；
框大小：边框框；
大纲：无；
}
请更改下面的css（它会起作用）

到

使用此代码。干得不错


var container=document.getElementsByClassName（“wrap”）[0]；
container.onkeyup=函数（e）{
var target=e.src元素；
var maxLength=parseInt（target.attributes[“maxLength”].value，6）；
var myLength=target.value.length；
如果（myLength>=maxLength）{
var next=目标；
while（next=next.nextElementSibling）{
if（next==null）
打破
if（next.tagName.toLowerCase（）=“输入”）{
next.focus（）；
打破
}
}
}
否则，如果（myLength尝试在输入字段下方添加此脚本：

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


var oInput=document.getElementById（'number_text'）；
oInput.onkeypress=功能（ev）{
setTimeout（函数（）{
如果（oInput.value.length>5）{
输入设置选择范围（0,0）；
oblur（）；
}
}, 0);
}

在输入第6个字符后，这个命令会将输入光标强制移到输入的开头。我还在字段中添加了一个blur（），这样光标就不会跳到开头

还需要超时。如果没有超时，输入的字符将插入开头。有关超时的详细信息：
为另一个数字添加空格，并使用剪辑路径剪辑输入


#数字#u文本{
左侧填充：9px；
字母间距：31px；
边界：0；
背景：
重复线性渐变（向右，#e1e10 26px，透明26px 38px）
底部/100%1px无重复；
宽度：260px；
剪辑路径：多边形（0 0，计算（100%-38px）0，计算（100%-38px）100%，0 100%）；
框大小：边框框；
大纲：无；
}
所以我喜欢Temani Afif关于使用剪辑蒙版的回答。我觉得这很好。
我想提出另一个解决方案（稍微不那么优雅）。我使用Firefox也测试了这个问题，在文本区域外单击（失去焦点）不会使第一位数字重新出现，也不会使文本输入中的字符串恢复正常

我相信问题在于你设置的字母间距css属性：
字母间距：31px；
，我相信这会适用于大多数浏览器的“闪烁”插入符号。使用Chrome，它似乎会在失去焦点时删除此属性，而Firefox即使在失去焦点后也会保留此属性

第一种解决方案是使用手动调用blur（）函数使输入失去焦点。这在Chrome中起作用（使用自动执行的匿名函数）：

它在Firefox中的闪烁效果与Chrome相同，一切都会很好

注意：超时功能为浏览器提供刷新时间，并实际更新我们需要的内容

注意：您可以选择在函数中调用.blur（），使文本框失去焦点，或者忽略该选项，它们仍将位于输入字段中，不会出现数字错误

希望这有助于你对概念的理解，也有助于解决这个问题。其他一些人提供了很好的解决方案，可以避免整个闪烁问题，并且可以在Firefox和Chrome中使用！
这看起来像是我以前遇到的常见UI问题

我打赌它只会在某些平台上失败（这就是这个特定bug的本质）

在一些（但不是所有）平台上，使用间距字符表示插入符号

在某些（但不是所有）平台上，此字符是非空格字符，但在下一个（而不是最后一个）字符上重叠。因此，如果没有下一个字符，则在输入完成之前将用空格填充

在这两种情况下，显示器将以这种方式工作

在这种情况下，最好的解决方案是最简单的解决方案，以适应这种常见的系统怪癖，而不是像一些人建议的那样强迫它按您希望的方式运行的解决方案。这不太可能引入错误，更可能在所有平台上工作

解决方案是在入口的末端留出一点空间来显示这个

将“宽度”增加到230或240，您应该表现良好

此外，您还可以更好地适应非标准系统，特别是具有替代字体或大小属性的辅助功能系统，方法是通过在区域中输入全宽空间来检测宽度，在末尾添加四分之一宽度空间，测量它们，然后删除它们，或者简单地操纵它来覆盖全宽空间当用户键入（或以其他方式输入数据时，不要假定它是一个键盘，甚至是一次输入一个字符的东西。）
您可以通过添加输入框的js onkeyup的blur（）事件来处理它：


myFunction=（）=>{
if（document.getElementById（“数字文本”）.value.length==6）
document.getElementById（“number_text”）.blur（）；
}
#数字#u文本{
左侧填充：9px；
字母间距：31px；
边界：0；
背景图像：线性渐变（向右，#e170%，rgba（255，255，255，0）0%）；
背景位置：左下；
背景尺寸：38px 1px；
padding-left: 5px;

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

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


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