JVFloat.js - the experiment with form Accessbility and UX in HTML5
I recently discovered the Mobile Form Interaction - http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users by Matt D. Smith, and try to port them into JS
HTML5 input placeholder
attribute is the most amazing improvement on input element’s interaction. It’s able to tell what the input
means — and can be used as label
replacement. However, when we use input
without label
, the user won’t know what the input
means, because the placeholder
text is removed when the user insert some text to the input
.
Dribbble user Matt D. Smith proposed the fix for the placeholder
visibility:
the proposed fix later inspired Jared Verdi to create JVFloatLabeledTextField. Those two inspired me to port the fix to HTML5 input
element. And so, JVFloat.js was born.
JVFloat consist of two parts — javascript
and css
. javascript
was used for input detection and class
toggling, and the css
to control the Animation and overall styles. The styles included is very basic, so you’ll need to adapt the default css
into your site’s CSS. JVFloat uses CSS3 transform
to perform the animations, so you’ll need to perform a feature detection — by using Modernizr or something — to detect these features. If you don’t, the users won’t see JVFloat’s placeholder on unsupported browsers.
JVFloat is open-source on Github, so adapt and modify this plugin as you like — and send me a pull request :). Also this is my first attempt to write a JQuery or Zepto plugin, so any improvement and suggestion will be very appreciated. tell me your suggestion on JVFloat Issue Page, or mention me on Twitter.