A small jQuery plugin for textarea, password and text inputs. This plugin was designed to take care of nagging issues for inputs like backwards compatability with placeholders for unsupported browsers (including password fields), labels and styling. Since we are already applying the plugin for placeholders we might as well apply some other things as well.
- wForm - See all the form plugins working together.
- wSelect - Custom select boxes.
- wCheck - Radio and checkbox input plugin.
- wChar - On the fly character counter for inputs.
Available options with notes, the values here are the defaults.
$.fn.wInput.defaults = {
theme: 'classic', // set theme for inputs
labelPosition: 'left', // set position for label (left,top)
highlight: true // highlight field when selected
};For starters you will need to include the following files:
<script type="text/javascript" src="./wInput.js"></script>
<link rel="Stylesheet" type="text/css" href="./wInput.css" />You can then apply the plugin to any input text, password and textarea elements using the jQuery selector function:
$('input:text, input:password, textarea').wInput();You can also optionally set the data-label attribute and a label will automatically be created for you. It's position will be beased on the labelPosition option.
<input type="text" data-label="Username:" placeholder="Enter a username"/>Global CSS labels are also available in this plugin and can be used by setting an adding the class name wLabel-left, wLabel-top or wLabel-left-top to an element.
<label class="wLabel-left">Label:</label>- More jQuery plugins by Websanova
- Websanova JavaScript Extensions Project
- jQuery Plugin Development Boilerplate
- The Ultimate Guide to Writing jQuery Plugins
MIT licensed
Copyright (C) 2011-2013 Websanova http://www.websanova.com