Fliplet number input

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
<form>
  <div class="form-group fl-number-input" id="target">
    <input type="number" class="form-control" id="input">
  </div>
  <input type="submit" class="btn btn-primary">
</form>

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

JavaScript

(function() {
	window.Fliplet = window.Fliplet || {};
  
  Fliplet.UI = Fliplet.UI || {};
  /**
   * Configures a date picker UI.
   *
   * Required markup
   *
   * <div class="form-group fl-number-input" id="target">
   *  <input type="number" class="form-control" value>
   * </div>
   *
   * @param {String|Node|jQuery} el - Selector or node for the target element
   * @param {Object} options - A map of options for the constructor
   * @param {Boolean} [options.required=false] - If TRUE, the field is required and users won't be able to clear the value
   * @param {String} [options.locale] - Custom locale for the date picker
   * @returns {Object} Date picker instance
   */
   Fliplet.UI.NumberInput = function(el, options) {
    options = options || {};

    var $el = $(el);

    if (!$el.length) {
      throw new Error('No target found. Please a the target for the number input.');
    }

    var instance = $el.data('flNumberInput');

    if (instance) {
      return instance;
    }

    instance = {};

    var $input = $el.find('input[type="number"]');
    var testInput = document.createElement('input'); // Create a virtual input for testing input validity
    var changeListeners = [];
    var skipOnChange = false;

    testInput.type = 'number';

    function get() {
      var value = $input.val();

      if (value === '') {
        return;
      }

      return Number(value);
    }

    function sanitizeInputValue(value) {
      if (typeof value === 'string') {
        value = value
          .trim()
          .replace(/[^0-9.-]/g, '') // Replace non-digits
          // .replace(/(?!^)./g, '') // TODO: Only keep the first . character
          .replace(/(?<!^)-/g, '-'); // Only keep the - sign in the beginning
      }

      return value;
    }

    function set(value, triggerChange) {
      skipOnChange = triggerChange === false;

      if (typeof value === 'undefined' || value === null) {
        $input.val(value);

        return;
      }

      value =...