A jQuery input plugin
JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
lib
.gitignore
README.md
gruntfile.js
index.html
package.json
wInput.css
wInput.jquery.json
wInput.js
wInput.min.js

README.md

wInput.js

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.

Related Plugins

  • 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.

Settings

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
};

Examples

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"/>

CSS labels

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>

Resources

License

MIT licensed

Copyright (C) 2011-2013 Websanova http://www.websanova.com