AUI editable number combobox

Editable number combobox for aui 6.0.0

by Malin Jayakody

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.min.js"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.min.css">
<form class="aui top-label">
  <div class="field-group top-label">
    <label>Test</label>
    <div class="wrapper">
      <select class="select short-field">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
      <input class="text number-select" type="text">
    </div>
  </div>
</form>

CSS

.wrapper {
  position: relative;
}

.number-select {
  position: absolute;
  top: 1px;
  left: 1px;
  border: none!important;
  height: 27px!important;
  width: 45px!important;
}

JavaScript

// AUI framework with momentjs
(function($) {

  var inputFiler = function(e) {
    // Allow: backspace, delete, tab, escape, and enter
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode == 65 && e.ctrlKey === true) ||
      // Allow: Ctrl+C
      (e.keyCode == 67 && e.ctrlKey === true) ||
      // Allow: Ctrl+X
      (e.keyCode == 88 && e.ctrlKey === true) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  };

  // Ready
  $(function() {
    $('.number-select').keydown(inputFiler).on('change input', function() {
      var item = $(this);
      if (!$.isNumeric(item.val())) {
        item.val('');
      }
    });
    $('.select').change(function(e) {
      $('.number-select').val($(this).val());
    });
  });
}.call(this, jQuery));