CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Erich
Erich

Reputation: 1603

Create an input field with a placeholder that gets written into upon text entry

I'm trying to create an input field for a phone number. I would like the placeholder to show the expected format/pattern: (XXX) XXX-XXXX as shown below.

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

However, when the user starts entering numbers, I'd like them to simply replace the individual X's.

After inputting a few numbers the field would look like this (cursor after the 4)... 

"(302) 4XX-XXXX"

And then the user entering backspace would simply replace the last number entered with an X again. After 2 backspaces...

"(30X) XXX-XXXX"

I've seen this behavior before in registration forms, but I haven't been able to locate any examples lately. I was hoping there might be a decent jquery plugin that accomplishes this, but I have not found it yet.

Upvotes: 0

Views: 1631

Answers (3)

Jmoreland91
Jmoreland91

Reputation: 178

You may be able to use something like the Mask Input plugin in JQuery

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

Or

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

Upvotes: 1

RedWolves
RedWolves

Reputation: 10385

The Masked Input Plugin will do what you want. http://digitalbush.com/projects/masked-input-plugin/

Upvotes: 1

Mr.Web
Mr.Web

Reputation: 7144

You can use a Mask, with jQuery:

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

You can grab a plugin here: http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js

Upvotes: 2

Related Questions