Lightweight & Cross-Browser jQuery Input Hint Plugin - Coolinput

File Size: 5.25KB
Views Total: 841
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight & Cross-Browser jQuery Input Hint Plugin - Coolinput

Coolinput is a lightweight jQuery input hint plugin that adds a default value to the input filed with a lot of custom options, mimics html5 placeholder attribute for old browsers like IE7, IE8, etc. By default, the plugin use text from input's "title" attribute for hint. You can also manually specify the hint's text in the javascript.

See also:

How to use it:

1. Include jQuery javascript library and jQuery Coolinput plugin on your page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.coolinput.js"></script>

2. Insert an html input field

<input name="text" type="text" title="hint" class="demo">

3. Simply call the plugin and you're done

<script>
$(function(){
$('.demo').coolinput();
});
</script>

4. Custom options

// Simplest call, will use text from input's "title" attribute for hint.
$('.demo').coolinput();

// You can also manually specify the hint's text.
$('.demo').coolinput('foo');

// You can also pass an object to override a few options.
$('demo').coolinput({
  useHtml5:true, // Use HTML5's native placeholders when possible.
  hint:null, // Input hint text.
  source:"title", // Source attribute for input hint text. Overrides "hint".
  removeSource:true, // Remove the source attribute after reading its value.
  blurClass:"blur", // Add a class to the input when it loses focus.
  extraClass:false, // Extra classes to ad to the input.
  clearOnSubmit:true, // Clear the input hint when the form is submitted (so an empty value is submitteed).
  clearOnFocus:true, // Clear the input hint when the input is focused.
  persistent:true // If set to false, the input hint will only be visible the first time an input is seen.
});

// And, as usual, it's totally chainable can be chained.
$('.demo').find('.other-selector').coolinput().addClass('foo');

This awesome jQuery plugin is developed by alexweber. For more Advanced Usages, please check the demo page or visit the official website.