How to set placeholder with JS

Question

Please take a look at this fiddle:

http://jsfiddle.net/KA85s/3/

JQ-UI sets first option as default. I don't want it to be happened: instead I want to set HTML5 placeholder.

How can I set HTML 5 placeholder (instead of first available <option> ) for these JS generated inputs?

Answer 1

Use:

input.attr("placeholder", value);

Updated jsfiddle:

http://jsfiddle.net/Meligy/KA85s/5/

In the example I just replaced your val() call, obviously, you can completely remove the part from the function and add it separately with any text you want.

Answer 2

This will do all you need without cross browser compatibility issue i have tested in ie7,8,9 runs perfect.

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">

good luck!

Answer 3

@Mohamed Meligy came with the same solution

http://jsfiddle.net/KA85s/8/

Though i used something else..

here is how it works when your input element is created with use jQuery to give it a placholder attribute and we are done :D

** UPDATED **

http://jsfiddle.net/KA85s/19/

added custom default value :D