文本输入提示onChange

Question

我有一个文字输入，我想，有点;自动完成用户使用000..

键入的号码

它需要如下图所示：

当用户仍在键入时，添加零以完成该号码（它需要有6位数字）。

但就像提示/占位符一样（如上图中所示）。

我尝试使用占位符属性，但一旦用户开始输入，它就会消失。另外......占位符的价值是动态的。它根据用户输入的内容而变化。

我希望我的问题很明确。

Answer 1

        
        function myFunction() {

        var x = document.getElementById("number");
        x.value = parseInt(x.value, 10);// removes front trailing zeros
        x.value = pad(x.value, 6);//add front trailing zeros
        
    }
        
        function pad (str, max) {
          str = str.toString();
          str = str.length < max ? pad("0" + str, max) : str;
          return str;
        }

   Enter your number: <input type="text" id="number" onkeyup="if(!(event.keyCode>36&&event.keyCode<41)){myFunction()}" onfocus="this.trailingZeros">

Answer 2

我就是这样做的：

$(".mytext").on('keyup keypress change', function(e) {
  if ($(this).val().length >= 6) {
    e.preventDefault();
  }
  $(".txtbg").text(Array(7 - $(this).val().length).join("0"))
});

Here is the JSFiddle demo

这个问题特别没有标记JQuery，所以请考虑将其作为替代解决方案。