用点制作输入场掩码
[英]Make an input field mask with dots
问题描述
I have an input field like this: 
我有一个像这样的输入字段：
<input type="text" placeholder=".........">
When a user enters the field with some text I would like the dots to be replaced with the letters. 当用户使用一些文本输入字段时，我希望将点替换为字母。 So if I entered "Ha" in it. 因此，如果我在其中输入“ Ha”。 The user sees this: 用户看到以下内容：
<input type="text" placeholder="Ha.......">
And so on for the other letters 以此类推，其他字母
I've seen a lot of examples with dates, numbers and ip's but am still quite not sure on how to reproduce this to my problem. 我已经看到了很多带有日期，数字和ip的示例，但是仍然不确定如何重现此问题。
1 个解决方案
解决方案1
4 已采纳 2016-01-14 16:02:44
The solution to this would be slightly complicated. 解决这个问题的方法会有些复杂。
First, create a new duplicated input which will act as the "placeholder" as it will float behind the real input field. 首先，创建一个新的重复输入，它将作为“占位符”，因为它将浮动在实际输入字段的后面。 Then attach event listener on the real input and fill the value into the "placeholder". 然后将事件侦听器附加到实际输入上，并将值填充到“占位符”中。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.