遮罩文字輸入

Question

嘿，我正在嘗試制作一個像這樣的簡單輸入文本。

<input type="text" id="pin" name="pin" maxlength="4" size="4" placeholder="____">

現在，在前端，我希望保留該占位符，直到用戶鍵入所有字符為止。

例如：

1___
12__
123_
1234

這清楚嗎？ 謝謝您的幫助

編輯：讓我說得更清楚。 我希望占位符或模擬占位符的內容在輸入所有字符之前保持可見！ 這意味着當我鍵入一個字符時，它不會消失。 它在尚未鍵入的字符上插入下划線。

Answer 1

占位符默認情況下不會像這樣工作，因為這是一個壞主意。 以這種情況為例：

<input type="text" placeholder="Type something here!"/>

如果用戶開始輸入“ Hello，world！”，則過程將是：

"Hype something here!"
"Hepe something here!" ...
"Hellosomething here!" ...
"Hello world!ng here!"

如果您的占位符幾乎不可見，那會很好，但是在大多數情況下，這將是丑陋的，也可能造成混淆-用戶可能會導致他們相信他們必須准確輸入占位符，否則他們可能會嘗試清除占位符輸入完全沒有成功。

占位符只是為文本輸入元素提供虛擬內容， 直到添加了真實內容。