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

14

当我输入最后一个数字时，第一个数字在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" >
展开摘要

帮助我摆脱这个问题。谢谢

javascript  jquery  html  css 
— 吉涅什·潘查尔（Jignesh Panchal）
source
抱歉，我不明白这个问题？
— evolutionxbox
1
看起来您需要将其宽度扩大一些，以处理最后一个字符的子弹。
— 自由-m
@evolutionxbox花了我一两分钟的时间...片段确实很好地演示了这个问题-这是一个带有大字母间距的输入框。单击输入的末尾并键入-它停在6，但是1（第一个字符）在输入的左侧丢失（滚动并隐藏了溢出）。
— 自由-m
同样的问题，但没有答案，在目前的Chrome工作（至少）：stackoverflow.com/questions/8961045/...
— freedomn米
我建议使用6个单独的input控件，并在键入/删除字符时在它们之间移动插入符号。否则，您将始终在浏览器/字体大小/缩放级别等之间存在对齐问题
— Rory McCrossan

Answers:

6

添加另一个数字的空间并使用剪切输入 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">
展开摘要

— Temani Afif
source
首先工作正常，第二个指针可见。
— Jignesh Panchal
@JigneshPanchal我知道，我提出了两个不同的想法。也许有人想让光标可见
— Temani Afif
在第一个解决方案中，〜clip-path〜不能在所有浏览器中使用。
— Jignesh Panchal
@JigneshPanchal，除非您使用的是浏览器，否则所有现代浏览器都支持clip-path（caniuse.com/#feat=css-clip-path）
— Temani Afif
3

使用此代码。它很好的工作 

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>
展开摘要

— 拉米兹·布哈里（Rameez Bukhari）
source
感谢您提供这样一个好的解决方案，但在输入数字后使用退格键删除数字时会出现问题。在单个输入文本中不会发生此问题。
— Jignesh Panchal
将此代码添加到if in的else部分 else if (myLength <= maxLength) { prev=target.previousElementSibling; while (prev = prev) { if (prev == null) break; if (prev.tagName.toLowerCase() == "input") { prev.focus(); break; } } }
— Sreeraj_ms
@jigneshpanchalmj如果您的问题已解决，请正确回答。
— Rameez Bukhari
1
尽管它解决了占位符问题，但此解决方案需要大量工作才能使其可用。例如，单击第3个输入并键入-输入第3个（可能是您想要的）-然后单击第2个并键入另一个数字两次-输入第2个但第3个输入被忽略。因此，左光标后退-光标将被忽略（或更确切地说是还原）。也许没关系，只是感觉不太好。
— 自由-m
parseInt(target.attributes["maxlength"].value, 6);“ 6”不是默认值，它是转换int的基础
— 自由-m
2

尝试在输入字段下面添加此脚本：

<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是使用javascript执行异步功能的好解决方案吗？

— 朱拉·赫伯
source
如果使用onkeyup事件，也许可以摆脱setTimeout。
— Jonas Eberle
keyup会在键“ up”上触发时引起闪烁
— Jura Herber
1

您可以通过添加输入框的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/>
展开摘要

— akashdeep阿罗拉
source
输入最后一个数字时，它会将所有数字移动几次。
— Jignesh Panchal
0

请在下面的CSS上进行更改（它将起作用）

padding-left: 14px;

至

padding-left: 5px;
— 拉吉什
source
但这在数字边界以下的设计中出现问题。和数字不看起来边界的中心。
— Jignesh Panchal
0

因此，我喜欢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. 将输入的letter-spacing属性的内联样式更改为其他值（因为我们不能费力地以编程方式编辑number_text的CSS类，例如在文档的style部分中重写整个style标签）。
  2. 从输入中删除类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中使用！

— 图莫·马西雷
source
0

它看起来像我之前遇到的常见UI问题。

我敢打赌，它也只会在某些平台上失败（这是此特定bug的本质。）

在某些（但不是全部）平台上，使用空格字符表示插入符号。

在某些（但不是全部）平台上，此字符是无间距的，但是在下一个字符（而不是最后一个字符）上重叠。因此，如果没有下一个字符将被空格填充，直到完成输入。

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

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

解决的方法是在条目的末尾留出一些多余的空间来显示此内容。

将“ 宽度 ”增加到230或240，您应该会很好。

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

— 罗伯特·鲁梅迪苏里
source
0 

$(document).on('keyup','#numberinput',function(){
    		var aa = $(this).val();

    		var aa = aa.substring(1);

    		if(aa.length > 5)
    		{
    			$('#numberinput').val(aa);
    		}
    	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" id="numberinput">
展开摘要

— 马米克·帕特尔（Marmik Patel）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.