public
Last active

Jquery Simplehints

  • Download Gist
simple-hints.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<style>
.input, .select, .textarea {
background: #fff;
border: 1px solid #aaa;
padding: 5px;
margin-top: 8px;
margin-bottom: 5px;
width: 380px;
font-size: 14px;
font-weight: 700;
color: #bbb;
}
 
input.bold, select.bold, textarea.bold {
color: #000;
}
.checkbox, .radio{
margin: 10px 0 0 0;
}
 
.select{
width: 390px;
}
 
.textarea{
float: left;
height: 200px;
width: 385px;
margin-top: 15px;
overflow: auto;
font-family: inherit;
}
</style>
 
<input type="text" name="email" class="input hint" title="Email Address" value="" />
simple-hints.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
// BEGIN JQUERY
jQuery.fn.simplehints = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('value').length == 0)
$this.attr('value', $this.attr('title'));
if ($this.attr('value').length != 0 && $this.attr('value') != $this.attr('title'))
$this.addClass("bold");
$(this).focus(function () {
if ($this.attr('value') == $this.attr('title'))
$(this).get(0).setSelectionRange(0,0);
}).keypress(function() {
if ($this.attr('value') == $this.attr('title') && $this.attr('type') != 'select-one')
$this.attr('value', '').addClass("bold");
}).change(function() {
if ($this.attr('value') != $this.attr('title'))
$this.addClass("bold");
if ($this.attr('value') == $this.attr('title'))
$this.removeClass("bold");
}).blur(function() {
if ($this.attr('value') == '')
$this.attr('value', $this.attr('title')).removeClass("bold");
}).parents('form').submit(function(e) {
if ($this.attr('value') == $this.attr('title'))
$this.attr('value', '');
});
});
};
 
$(document).ready(function(){
$(this).find('form .hint').simplehints();
});
 
// END JQUERY

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.