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.
// initializes the NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
// sets value to the NumericTextBox
min: 10,
max: 100,
placeholder: 'NumericTextbox',
floatLabelType: 'Always',
created: function(args) {
// prevents nullable value during initialization
if (this.value==null) {
this.value=0;
}
},
blur: function(args) {
// prevents nullable input while focus out
if (args.value==null)
this.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/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="wrap">
<input id="numeric1" 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: 0 auto;
width: 240px;
padding-top:100px;
}