score:0

<maskedinput
      {...other}
      ref={inputref}
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      placeholderchar={'\u2000'}
      showmask
    />

you can use the mask property, for better information, visit the docs.

https://material-ui.com/demos/text-fields/#formatted-inputs

score:4

material ui, has a property for its input called: inputprops, its an object that you can pass the attributes you want to assign to the input element itself, so you can give it {pattern: 'your pattern'} and it will get applied to the input, as a second way, you can try maskedinputs like this:

      function textmaskcustom(props) {
        const { inputref, ...other } = props;

        return (
          <maskedinput
            {...other}
            ref={inputref}
            mask={[
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/
            ]}
            placeholderchar={"\u0000"}
            showmask
          />
        );
      }

and then pass this to the material input as a prop and tell it to use this masked input instead of its default input component:

      <input
        value={textmask}
        onchange={this.handlechange("textmask")}
        id="formatted-text-mask-input"
        inputcomponent={textmaskcustom}
      />

Related Query

More Query from same tag