Question

我有一个像这样的输入字段：

<input type="text" placeholder=".........">

当用户输入带有某些文字的字段时，我希望用字母替换这些点。所以，如果我进入＆＃34;哈＆＃34;在里面。用户看到了这一点：

<input type="text" placeholder="Ha.......">

等等其他字母

我已经看过很多关于日期，数字和IP的例子，但我仍然不确定如何将这个问题重现为我的问题。

Answer 1

对此的解决方案会稍微复杂一些。

首先，创建一个新的重复输入，它将作为＆＃34;占位符＆＃34;因为它会漂浮在真正的输入字段之后。然后在实际输入上附加事件监听器并将值填入＆＃34;占位符＆＃34;。

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div style="position: relative; width: 400px; height: 24px;">
        <input type="text" style="width: 100%; height: 100%; position: absolute; z-index: 1; color: #ccc" id="placeholder">
        <input type="text" style="width: 100%; height: 100%; position: absolute; z-index: 2; background-color: transparent; color: #000" id="realInput">
    </div>
    <script>
      function fillPlaceholder(){
        //suppose you want 9 characters for the placeholder
        var limit = 9;
        var text = $("#realInput").val();
        while (text.length < limit) {
            text += ".";
        }
        $("#placeholder").val(text);
      }
      $("#realInput").on("input", fillPlaceholder);
      fillPlaceholder();
    </script>
  </body>
</html>

＆＃13;

使用点

1 个答案: