Maintain trailing zeros in NumericTextBox in JavaScript (ES5) NumericTextBox control

23 Mar 2023 / 1 minute to read

By default, trailing zeros disappear when the NumericTextBox gets focus. However, you can use the following sample to maintain the trailing zeros while focusing the NumericTextBox.

Source

Preview

index.js

index.html

styles.css

var numericFocus= function () { 
      var numericObj = this.ej2_instances ? this.ej2_instances[0] : this;
      numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
    }
    // Render the Numeric Textbox
  var numeric = new ej.inputs.NumericTextBox({
        value: 10,
        decimals:2,
        format: 'n2',
        change: numericFocus
    });
    numeric.appendTo('#numeric');
    document.getElementById('numeric').addEventListener('focus', numericFocus);

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component to maintain trailing zeros">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
     
     <div id="container">
        <div class="wrap">
          <input id="numeric" type="text">
        </div>
     </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 35px auto;
  width: 240px;
  padding-top:100px;
}