HTML5 Input Types Alternative (Part 2)

July 17, 2014
Some time back, I wrote a post - HTML5 Input Types Alternative - where I suggested that since implementation in various browsers of new HTML5 input types is inconsistent, we should not yet use them, but rather use controls implemented in JavaScript. I have suggested w2ui-fields library. As I have gotten feedback and suggestions from many people, I have improved and updated the library which is now ready for its second release.

Control Types

The number of input controls is still the same. They can be split in the 5 categories: These are most frequent control types that, I think, can provide 98% of the input needs to any project. The controls are flexible in a way that they are not locked to any particular format. If it is a date, you can define virtually any date format; if is is a number, you have an option to specify its formatting rules, etc.

Demos

Below are some of the demos of the controls. For more complete coverage go to demo page.

What Is New

I have worked through each comment in my previous post trying to understand and implement suggestions for improvement. As a result, the library seems to be more user friendly.
  • LIST - has improved visual markers, search, navigation and events
  • MULTI SELECT - has improved keyboard support and item rendering
  • DATE - has month and year selection (click on the month/year title)
  • UPLOAD - has improved preview, item rendering, events
In general, I wanted these controls to be as smoothly integrated with regular <INPUT> as possible. Below is a sample example of use:
Each control
  • Works on INPUT
  • Dispatches DOM change event
  • Supports keyboard (arrow keys, etc.)
  • Has customization options
  • Has clean user experience

Download

The library is only 23kb (minified and gzipped). These controls are part of w2ui 1.4, but can also be used stand-alone. You can link it directly:
Or download
Download w2ui-1.4.zip - 69kb (minified & gzipped)
Download w2ui-fiels-1.4.zip - 23kb (minified & gzipped)
P.S. W2UI 1.4 is coming out this week too. Currently it is in RC3.

User Comments

comments powered by Disqus
Follow
follow us in feedly
More Articles