創建帶有占位符的輸入字段，該占位符在文本輸入時被寫入

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中使用Mask：

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

您可以在此處獲取插件： http : //jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js

Answer 2

Masked Input插件將滿足您的需求。 http://digitalbush.com/projects/masked-input-plugin/

Answer 3

您可能可以在JQuery中使用類似Mask Input插件的功能

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

要么

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