Add floating label to read only textbox in React Textbox component
30 Jan 20237 minutes to read
You can achieve floating label for read-only textboxes by adding/removing e-label-top
and e-label-bottom
classes to the label element
In this sample, click the update value button to fill the read-only textbox with value and float a label.
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
valueBtn;
removeBtn;
inputElement;
render() {
return (<div className="wrap">
<div className="row">
<div className="e-float-input">
<input className="e-input myField" onFocus={this.floatFocus} onBlur={this.floatBlur} ref={v => this.inputElement = v} type="text" id="myText" readOnly={true}/>
<span className="e-float-line"/>
<label className="e-float-text">Enter value</label>
</div>
</div>
<div className="row">
<button className="e-btn update_value" id="valuebtn" onClick={this.updateBtnClick} ref={btn => this.valueBtn = btn}>Set value</button>
<button className="e-btn remove_value" id="removebtn" onClick={this.removeBtnClick} ref={removeBtn => this.removeBtn = removeBtn}>Remove value</button>
</div>
</div>);
}
updateBtnClick = () => {
this.inputElement.value = '10';
this.checkFloatingLabel('myText');
};
removeBtnClick = () => {
this.inputElement.value = '';
this.checkFloatingLabel('myText');
};
checkFloatingLabel(id) {
const inputElement = document.getElementById(id);
const labelElement = inputElement.parentElement.querySelector('.e-float-text');
if (inputElement.value !== '') {
labelElement.classList.remove('e-label-bottom');
labelElement.classList.add('e-label-top');
}
else {
labelElement.classList.remove('e-label-top');
labelElement.classList.add('e-label-bottom');
}
}
floatFocus(args) {
args.target.parentElement.classList.add('e-input-focus');
}
floatBlur(args) {
args.target.parentElement.classList.remove('e-input-focus');
}
}
ReactDOM.render(<Default />, document.getElementById('input-container'));
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class Default extends React.Component {
public valueBtn: HTMLButtonElement;
public removeBtn: HTMLButtonElement;
public inputElement: HTMLInputElement;
public render() {
return (
<div className="wrap">
<div className="row">
<div className="e-float-input">
<input className="e-input myField" onFocus= {this.floatFocus} onBlur= {this.floatBlur} ref = { v => this.inputElement = v!} type="text" id="myText" readOnly={true} />
<span className="e-float-line" />
<label className="e-float-text">Enter value</label>
</div>
</div>
<div className="row">
<button className="e-btn update_value" id="valuebtn" onClick = { this.updateBtnClick} ref = { btn => this.valueBtn = btn! }>Set value</button>
<button className="e-btn remove_value" id="removebtn" onClick = { this.removeBtnClick} ref = { removeBtn => this.removeBtn = removeBtn!}>Remove value</button>
</div>
</div>
);
}
public updateBtnClick = (): void => {
this.inputElement.value = '10';
this.checkFloatingLabel('myText')
}
public removeBtnClick = (): void => {
this.inputElement.value = '';
this.checkFloatingLabel('myText')
}
public checkFloatingLabel(id: any): void {
const inputElement: HTMLInputElement = document.getElementById(id) as HTMLInputElement;
const labelElement: HTMLInputElement = (inputElement as any).parentElement.querySelector('.e-float-text') as HTMLInputElement;
if (inputElement.value !== '') {
labelElement.classList.remove('e-label-bottom');
labelElement.classList.add('e-label-top');
} else {
labelElement.classList.remove('e-label-top');
labelElement.classList.add('e-label-bottom');
}
}
public floatFocus(args: any): void {
args.target.parentElement.classList.add('e-input-focus');
}
public floatBlur(args: any): void {
args.target.parentElement.classList.remove('e-input-focus');
}
}
ReactDOM.render(<Default />, document.getElementById('input-container'));