JSFiddle - React, Tailwind, and code Playground

by Nimesh Shalia

HTML

<p id="keyInfo">&nbsp;</p>
<fieldset>
  <label for="number">Select a number</label>
  <select name="number" id="number">
    <option>1</option>
    <option selected="selected">two</option>
    <option>3</option>
    <option>four</option>
    <option>5</option>
    <option>six</option>
    <option>7</option>
    <option>eight</option>
    <option>9</option>
    <option>ten</option>
    <option>11</option>
    <option>twelve</option>
    <option>13</option>
    <option>fourteen</option>
    <option>15</option>
    <option>sixteen</option>
    <option>17</option>
    <option>eighteen</option>
    <option>19</option>
  </select>
</fieldset>

CSS

fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

select {
  width: 200px;
}

.overflow {
  height: 200px;
}

JavaScript

$(function() {
  $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");
  $(document).keypress(function(e) {
    var key = String.fromCharCode(e.which); 
    $("#keyInfo").html("Key : " + key + " (" + e.which + ")");
    if ($("[id*='-button']").is(":focus") && (parseInt(key) < 10)) {
      e.preventDefault();
      if ($("#number option:contains('" + key + "')").length) {
        $("#number").val(key);
      }
      $("#number").selectmenu("refresh");
    } else {
      return true;
    }
  });
});