使用佔位符創建輸入字段，該佔位符在輸入文本時被寫入

Question

我正在嘗試爲電話號碼創建輸入字段。我希望佔位符顯示預期的格式/模式：（XXX）XXX-XXXX，如下所示。

Phone Number: <input type="text" name="phone" placeholder="(XXX) XXX-XXXX"> 

但是，當用戶開始輸入數字時，我希望他們簡單地替換單個X.

輸入幾個數字領域是這樣的（4個後光標）......之後

"(302) 4XX-XXXX" 

，然後將用戶輸入回退將只需更換一次與X輸入的最後一個號碼。 2退後...

"(30X) XXX-XXXX" 

我以前在註冊表單中看到過這種行爲，但我最近無法找到任何示例。我希望可能有一個體面的jQuery插件來完成這一點，但我還沒有找到它。

Answer 1

您可以使用蒙版，用jQuery：

jQuery(".maskPhone").mask("(999) 999-99999"); 

你可以在這裏搶插件：http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js

Answer 2

被掩沒的輸入插件會做你想要什麼。 http://digitalbush.com/projects/masked-input-plugin/

Answer 3

您可以使用類似的屏蔽輸入插件在JQuery中

http://digitalbush.com/projects/masked-input-plugin/

或者

http://digitalbush.com/projects/watermark-input-plugin/。