How to set a placeholder using JS

Question

Please take a look at this fiddle:

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

JQ-UI sets the first option by default. I don't want this to happen: instead, I want to set the HTML5 placeholder.

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

Answer 1

@Mohamed Meligy came up with the same solution

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

Although I used something else.

this is how it works when your input element is created using jQuery to give it the placholder attribute, and we are done: D

** UPDATED **

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

custom default value added: D

Answer 2

Using:

 input.attr("placeholder", value); 

Updated jsfiddle:

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

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

Answer 3

This will do everything you need without the browser compatibility problem that I tested in ie7,8,9. Perfect fit.

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

Good luck