jplaceholder demo

jplaceholder.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://raw.github.com/lvo811/jplaceholder/master/jplaceholder.js"></script>

<h2>Example 1</h2>
<p>
Placeholder text is hidden when input field is focusing
</p>
<form id="form1">
    <label>
        <input name="user" jplaceholder="User ID" />
    </label>
   <br/>
 	<label>
        <input name="pass" jplaceholder="Password" />
    </label>
</form>

<script>
$("#form1").jplaceholder();
</script>

<h2>Example 2</h3>
<p>
Placeholder text is shown when input field is focusing, and is hidden when a key is pressed
</p>
<form id="form2">
    <label>
        <input name="user" jplaceholder="User ID" />
    </label>
<br />   
 <label>
        <input name="pass" jplaceholder="Password" />
    </label>
</form>

<script>
$("#form2").jplaceholder({showOnFocus:true});
</script>
<h2>Example 3</h2>
<p>
Callback functions. It's useful for validation or event triggers.
</p>
<form id="form3">
    <label>
        <input name="user" jplaceholder="User ID" />
    </label>
   <br />
 	<label>
        <input name="pass" jplaceholder="Password" />
    </label>
</form>

<script>

if (!console) {
	var console = {
		log : function(m) {
			alert(m);
		}
	}
}

$("#form3").jplaceholder({
    focusFn: function(obj, event) {
        console.log('focus event  input name= ' + obj.attr('name'));
    },
    keypressFn: function(obj, event) {
        console.log('keypress event, input value is ' + obj.val());
    },
    blurFn: function(obj, event) {
        console.log('blur event');
    }
});
</script>
<h2>Example 4</h2>
<p>
Styling placeholder text
</p>
<form id="form4">
    <label>
        <input name="user" id="user" jplaceholder="User ID" />
    </label>
   <br />
 	<label>
        <input name="pass" id="pass" jplaceholder="Password" />
    </label>
</form>

<style>
    #form4 input {
        color:#f00;
        font-size:16px;
    }

    #form4 input + .jplaceholder.focus {
        color:#333 !important;  /* override inline style, jplaceholder changes opacity to .5 */
    }
</style>

<script>
    $("#form4").jplaceholder({showOnFocus:true});
</script>