Maintain trailing zeros in numerictextbox in EJ2 TypeScript Numerictextbox control

15 May 20233 minutes 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.

import {NumericTextBox} from '@syncfusion/ej2-inputs';
//maintains trailing zeros while focusing
let 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
let numeric: NumericTextBox = new NumericTextBox({
    value: 10,
    decimals:2,
    format: 'n2',
    placeholder: 'NumericTextbox',
    floatLabelType: 'Always' ,
    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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
     <div id='loader'>Loading....</div>
     <div id='container'>
        <div class='wrap'>
          <input id="numeric" type="text" />
        </div>
     </div>
</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;
}