Show mask only when control has focus?

I could not find in the documentation the ability to only show the mask when the control has focus.  How can this be achieved?

Thanks,

- Jeff V.


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team February 2, 2023 05:39 PM UTC

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 [isFocussetIsFocus] = 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


Loader.
Up arrow icon