我有一个这样的输入框:
<input type="text" placeholder=".........">
当用户输入带有一些文本的字段时，我希望将这些点替换为字母。因此，如果我在其中输入“Ha”。用户看到这个:
<input type="text" placeholder="Ha.......">
其他字母依此类推
我看过很多带有日期、数字和 ip 的示例，但我仍然不确定如何将其重现到我的问题中。
最佳答案
这个问题的解决方案会稍微复杂一些。
首先，创建一个新的复制输入作为“占位符”，因为它将 float 在真实输入字段后面。然后在真实输入上附加事件监听器并将值填充到“占位符”。
<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>关于javascript - 制作带点的输入字段掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34793601/