FormJS
Allows you easily re-style native form elements across all browsers and falls back to native form elements for mobile devices. Also, provides a simple API to manipulate form elements with javascript. Supports IE10+, all modern browsers, and mobile.
UI Elements include:
- Checkboxes
- Button Toggles
- Input Fields
- Dropdowns
- Entire forms
Usage
Styling form elements
Let's say you wanted to style a dropdown menu with the following html:
Maryland Virginia Washington, DC
With this library, you can do this:
var dropdown = el: document0;
Which will change your HTML into this:
Virginia Maryland Virginia Washington, DC Maryland Virginia Washington, DC
Then you can style the dropdown using CSS (and just hide the <select>
element).
Programmatically change the element's value
Each class comes with a set of utility methods so you can change the elements via JS. Using the example above, you could do the following:
// set the selected value programmaticallydropdown; // get the new data valuedropdown; // => "DC" // get the display valuedropdown; // => "Washington, DC"
Listening to change events
You can also listen to events on form elements. Given the following input element...
You can do the following:
var inputField = el: document0 { // user has finished typing into the field! } { // the user has typed a key into the field! };// set the valueinputField; // set new value// get the new valueinputField; // => "My text"
Examples
Examples can be found in the examples page.
Release History
- 2015-03-26 v1.0.0 Official release.