$(selector).placeholder({options});jQuery Placeholder plugin emulates the HTML5 placeholder attribute where not supported. The effect is similar to pre-populated text inside input fields that clear when in focus. See W3C Placeholder Attribute
Call $(selector).placeholder(options) on an input element with an attribute placeholder.
$('input#search').placeholder();
<form> <input id="search" name="q" placeholder="Search in books"> <button type="submit">Search</button> </form>
| Arguments | Type | Description |
|---|---|---|
| onFocus | string | Class to apply when input is focused. Default is focus. |
| onBlur | string | Class to apply when input is blurred. Default is false. |
| onChange | string | Class to apply if input value has changed after blurred. Default is false. |
| placeholderSupport | boolean | By default, the plugin will check for the browser's placeholder attribute support. Set to false or true to bypass. |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery/jquery.placeholder.js"></script>
$(selector).placeholder(options) on elements when DOM is ready
<script>
$(function(){
$('input#search').placeholder();
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Placeholder Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.placeholder.js"></script>
<script>
$(function(){
$('input[placeholder]').placeholder({onBlur: "blurred", onChange: "changed"});
});
</script>
<style>
input {border:2px solid black; color: black;}
.focused {border:2px solid red; color:red}
.blurred {border:2px solid green; color:green}
.changed {border:2px solid blue; color:blue}
</style>
</head>
<body>
<form>
<input id="search" name="q" placeholder="Search in books">
<button type="submit">Search</button>
</form>
</body>
</html>
$('input#search').placeholder({onBlur: "blurred", onChange: "changed"});
<script>
$('input#search').placeholder({onBlur: "blurred", onChange: "changed"});
</script>
<form>
<input name="q" placeholder="Search in books NV"><br />
<input name="q" placeholder="Search in books BV" value=" "><br />
<input name="q" placeholder="Search in books" value="Harry Potter"><br />
<input name="q">
<button type="submit">Search</button>
</form>
Try these test on the above example.