(function(Modules) {
  "use strict";

  let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
  let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';

  Modules.ColourPreview = function() {

    this.start = component => {

      this.$input = $('input', component);

      $(component).append(
        this.$preview = $('<span class="textbox-colour-preview"></span>')
      );

      this.$input
        .on('change keyup', this.update)
        .trigger('change');

    };

    this.update = () => this.$preview.css(
      'background', colourOrWhite(this.$input.val())
    );

  };

})(window.GOVUK.Modules);

(function(Modules) {
  "use strict";

  let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
  let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';

  Modules.ColourPreview = function() {

    this.start = component => {

      this.$input = $('input', component);

      $(component).append(
        this.$preview = $('<span class="textbox-colour-preview"></span>')
      );

      this.$input
        .on('input', this.update)
        .trigger('change');

    };

    this.update = () => this.$preview.css(
      'background', colourOrWhite(this.$input.val())
    );

  };

})(window.GOVUK.Modules);

Use input event not keyup
Use input event not keyup

The `oninput` event is a more performant way to detect changes to a
textbox’s contents (compared to `onkeydown`, `onpaste`, etc).

It’s not supported in older browsers, but since this is a likely to be
used by platform admin users only that’s OK.
