Categories
AngularJS

Fixing autocomplete (autofill) on AngularJS form submit

Many browsers support autocomplete but do not trigger “change” events on inputs when the user initiates autocomplete. This is a problem for many libraries and code in the wild that rely on performing some action (e.g. input validation) when input data change.

With respect to AngularJS forms, the problem becomes obvious if you are using AngularJS form validation. If you autofill an empty form then press Submit, AngularJS will think the inputs are still empty:

AngularJS unaware of autofilled inputs
AngularJS unaware of autofilled inputs

Here is a simple login form subject to this issue:

Unfortunately the underlying issue of not having an appropriate event related to autofill must be addressed by browser vendors. However in the meantime, we can use a custom directive to ensure AngularJS knows about form changes made by autofill at time of form submit.

Patch directive

In CoffeeScript

In JavaScript

Directive in use

The directive is simple to use; just apply it to your form and away you go:

Categories
Developer tools

HTML5 Canvas Gradient Creator

There are plenty of CSS3 gradient creators out there, but much to my surprise there was not a single gradient creator for HTML5 <canvas /> to be found. Thus I present to you the only one of its kind, the HTML5 Canvas Gradient Creator.

Features

  • Visual point-and-click, drag-and-slide creation of gradients for HTML5/JS canvas
  • 1-n color stops; as many as you need
  • 0-255 bit alpha support
  • Linear and radial gradients
  • Linear gradient rotation
  • Radial gradient inner and outer circle position
  • Elliptical radial gradients
  • Saving of custom presets (browser local storage)
  • Valid, commented HTML5 and JS code output
  • Responsive design

Minimum compatibility

This is minimum compatibility for usage of this tool, as well as for gradient code generated by this tool. Earlier versions of Chrome, Safari, or Opera might be supported.

  • Chrome: WinXP/OS X SL Chrome 14
  • Firefox: WinXP FF4 (FF3 for gradient code generated by tool), OS X SL FF5
  • IE: Win7-8 IE9*
  • Safari: WinXP/OS X SL Saf 4
  • Opera: WinXP Opera 10, OS X SL Opera 11.1

* Inclusion of FlashCanvas or excanvas might enable support for gradients in earlier versions of IE.

Languages and libraries

Check out the source on Github.