Html5 NumberInput

Set the groupSeparator property of the jqxNumberInput. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src=" http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxNumberInput"></div>

JavaScript

$("#jqxNumberInput").jqxNumberInput({
  width: 250,
  height: 25,
  theme: "energyblue",
  //inputMode: "simple",
  spinButtons: true,
  promptChar: " ",
  groupSeparator: ",",
  digits: 3,
  //value: 1234567890
  //value: 12345
});

$("#jqxNumberInput").on("change", event => {
  console.log($("#jqxNumberInput").jqxNumberInput("val"));
});


$("#jqxNumberInput input").on("keydown", event => {
  var value = $("#jqxNumberInput").jqxNumberInput("val");
  var stringedValue = "" + value
  //console.log(value, stringedValue);
  var length = stringedValue.length;
  console.log(stringedValue, length, length % 3, length / 3);

  if (length / 3 === 1) {
    var digits = $("#jqxNumberInput").jqxNumberInput("digits");
    console.log("digits", digits + 1);
    $("#jqxNumberInput").jqxNumberInput({ digits: digits + 1 });
  }
});

console.clear();