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:
<select>
<option value="MD">Maryland</option>
<option value="VA" selected>Virginia</option>
<option value="DC">Washington, DC</option>
</select>
With this library, you can do this:
var dropdown = new Dropdown({
el: document.getElementsByTagName('select')[0]
});
Which will add the following adjacent html into the DOM:
<div class="dropdown-container">
<div class="dropdown-value-container">Virginia</div>
<div class="dropdown-option-container">
<div class="dropdown-option" data-value="MD">Maryland</div>
<div class="dropdown-option dropdown-option-selected" data-value="VA">Virginia</div>
<div class="dropdown-option" data-value="DC">Washington, DC</div>
</div>
</div>
Then you can style the dropdown using CSS.
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:
dropdown.setValue('DC');
dropdown.getValue();
dropdown.getDisplayValue();
Listening to change events
You can also listen to events on form elements. Given the following input element...
<input type="text" value="" placeholder="Enter text here" />
You can do the following:
var inputField = new InputField({
el: document.getElementsByTagName('input')[0],
onChange: function (el) {
},
onKeyDownChange: function (el) {
}
});
inputField.setValue('My text');
inputField.getValue();
Examples
Examples can be found in the examples page.
Release History
- 2015-03-26 v1.0.0 Official release.