0

I want a default text in the input filed with grey color. But a user should not be able to select this text and also it is non deletable.

Example:

User types the name Susan. After they stop typing it would appear like this: SusanCartel. The grey part shows up automatically as a preview. Then when they hit create we would see SusanCartel. This way, people wont type in SusanCartelCartel by accident because they will see the preview.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Rashtra
  • 75
  • 3
  • 12
  • Sounds like you want more something like Google Instant uses, showing the autocomplete result *inside* the textbox. Have a look at http://stackoverflow.com/questions/6336094/jquery-autocomplete-in-background-of-input-text-box and http://stackoverflow.com/questions/5376956/make-part-of-inputtext-grey – Felix Kling May 02 '12 at 13:01
  • @close voter - that question is not even close to being a duplicate of this one. – Rory McCrossan May 02 '12 at 13:01
  • @Rory: Got the wrong link, the others probably fit though... – Felix Kling May 02 '12 at 13:02

2 Answers2

2

HTML5 has the new placeholder attribute you can use:

<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Type your username..." />

However this will not work in IE, or older browsers.

This plugin will achieve the same effect cross-browser.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • It seems to me OP wants to some autocomplete information to the input box, like Google Instant, not some static text. The question is a bit vague though. – Felix Kling May 02 '12 at 13:03
  • actually I want something like if a user click into the textbox then a word "cartel" should appear automatically into the textbox just after the what we are typing. The word "Cartel" should not be selectable and editable or deletable. – Rashtra May 03 '12 at 14:54
1

I normally use jquery-watermark. Check out this plugin link for more info.

Usage : 

$('#inputid').watermark('Required information', {className: 'myClassName'});

Also if you read the introduction carefully, you'll come across this point

Supports HTML5 "placeholder" capabilities natively (in browsers that support it), or native support can be disabled so that the plugin controls all watermarks

Ashwin Krishnamurthy
  • 3,750
  • 3
  • 27
  • 49