Prevent nullable input in NumericTextBox in JavaScript NumericTextBox control

08 May 2023 / 1 minute to read

By default, the value of the NumericTextBox sets to null. In some applications, the value of the NumericTextBox should not be null at any instance. In such cases, following sample can be used to prevent nullable input in NumericTextBox.

Source

Preview

app.ts

index.html

styles.css

import {NumericTextBox} from '@syncfusion/ej2-inputs';

// initializes NumericTextBox component
let numeric: NumericTextBox = new NumericTextBox({
    // sets value to the NumericTextBox
    placeholder: 'NumericTextbox',
    floatLabelType: 'Always' ,
    // prevents nullable value during initialization
    created: function (args) {
        if (this.value==null) {
            this.value=0;
        }
     },
   blur: function (args) {
        // checks for nullable value while focus out
            if (args.value==null)
              numeric1.value=0;
    }
 });

// renders initialized NumericTextBox
numeric.appendTo('#numeric1');

<!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 prevent nullable input" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <input id="numeric1" 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: 0 auto;
  width: 240px;
  padding-top:100px;
}