You can change the color of the TextBox by validating its value using regular expression in the keyup
event for predicting the numeric values as demonstrated in the following code sample.
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
constructor(props) {
super(props);
this.onKeyup = this.onKeyup.bind(this);
}
onKeyup(e) {
const str = e.target.value.match(/^[0-9]+$/);
if (!((str && str.length > 0)) && e.target.value.length) {
e.target.parentNode.classList.add('e-error');
}
else {
e.target.parentNode.classList.remove('e-error');
}
}
onInputFocus(args) {
if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
args.target.parentElement.classList.add('e-input-focus');
}
else {
args.target.parentElement.parentElement.classList.add('e-input-focus');
}
}
onInputBlur(args) {
if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
args.target.parentElement.classList.remove('e-input-focus');
}
else {
args.target.parentElement.parentElement.classList.remove('e-input-focus');
}
}
render() {
return (<div className="wrap">
<label> Normal Input </label>
<div className="e-input-group">
<input className="e-input" id="numericOnly" type="text" placeholder="Enter numeric values" onKeyUp={this.onKeyup} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
</div>
<label> Floating Input </label>
<div className="e-float-input e-input-group">
<input type="text" onKeyUp={this.onKeyup} required={true} onFocus={this.onInputFocus} onBlur={this.onInputBlur}/>
<span className="e-float-line"/>
<label className="e-float-text">Enter numeric values</label>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('input-container'));
#input-container .e-float-input { /* csslint allow: adjoining-classes */
margin: 30px 0;
}
.e-input-group.e-error .e-input { /* csslint allow: adjoining-classes */
color: #f44336;
}
.e-float-input.e-error input { /* csslint allow: adjoining-classes */
color: #f44336;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#input-container {
width: 240px;
margin: 0 auto;
padding: 20px 0px;
}
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}
.wrap label {
font-weight:bold;
}
.wrap .e-float-input {
margin:30px 0;
}
.wrap .e-input-group {
margin:25px 0;
}
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.onKeyup = this.onKeyup.bind(this);
}
public onKeyup(e: React.KeyboardEvent) {
const str = (e.target as HTMLInputElement).value.match(/^[0-9]+$/);
if (!((str && str.length > 0)) && (e.target as HTMLInputElement).value.length) {
((e.target as HTMLInputElement).parentNode as HTMLElement).classList.add('e-error');
} else {
((e.target as HTMLInputElement).parentNode as HTMLElement).classList.remove('e-error');
}
}
public onInputFocus(args: React.FocusEvent) {
if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
} else {
(((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
}
}
public onInputBlur(args: React.FocusEvent) {
if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
} else {
(((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
}
}
public render() {
return (
<div className="wrap">
<label> Normal Input </label>
<div className="e-input-group">
<input className="e-input" id="numericOnly" type="text" placeholder="Enter numeric values" onKeyUp={this.onKeyup} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
</div>
<label> Floating Input </label>
<div className="e-float-input e-input-group">
<input type="text" onKeyUp={this.onKeyup} required = {true} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
<span className="e-float-line"/>
<label className="e-float-text">Enter numeric values</label>
</div>
</div>
)
}
};
ReactDOM.render(<App />, document.getElementById('input-container'));