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
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
label, the user won’t know what the
input means, because the
placeholder text is removed when the user insert some text to the
Dribbble user Matt D. Smith proposed the fix for the
JVFloat consist of two parts —
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.