We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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.
Live Chat Icon For mobile
Up arrow icon