You can
display the mask in the masked textbox component only when the control has
focus by using the Focus and Blur events of the control and setting the display
of the mask dynamically based on the focus state of the control.
Here is an example
of how to achieve this:
|
function Default() {
const [isFocus, setIsFocus] = useState(false);
useEffect(() => {
setIsFocus(false);
}, []);
const onFocusHandler = () => {
setIsFocus(true);
};
const onBlurHandler = () => {
setIsFocus(false);
};
return (
<div className="control-section">
<div className="control-label">Mobile Number</div>
<MaskedTextBoxComponent
mask="000-000-0000"
placeholder={isFocus ? '___-___-____' : 'Enter Value'}
focus={onFocusHandler}
blur={onBlurHandler}
></MaskedTextBoxComponent>
</div>
);
}
|
This will
show the placeholder text in the format of the mask when the control has focus
and hide it when it loses focus.
Documentation: https://ej2.syncfusion.com/react/documentation/api/maskedtextbox/#events
Sample: https://stackblitz.com/edit/react-aoe9ev?file=index.js
