I need to mask the field so they are not visible after entering . having SSN of 10 digit (123-123-1234). I need to mask in such a way that (xxx-xxx-1234). Also While submit the page I need to send original variable (123-123-1234) to service. I used Cleave ,and tried with react-input-mask too. Any help would be appreciated.

    let enrollmentInput
    if (formatted) {
      enrollmentInput = (
        <Cleave key={refName} htmlRef={(ref) => this.refs[refName] = ref}
          className={inputClassNames}
          options={options}
          placeholder={placeholder}
          type={type}
          value={this.props.user[refName]}
        />
      )
    } 
    return 

          <InputMask {...enrollmentInput}  maskChar=" " maskType='ssn'className='control'/> 

I need to mask the field so they are not visible after entering . having SSN of 10 digit (123-123-1234). I need to mask in such a way that (xxx-xxx-1234). Also While submit the page I need to send original variable (123-123-1234) to service. I used Cleave ,and tried with react-input-mask too. Any help would be appreciated.

    let enrollmentInput
    if (formatted) {
      enrollmentInput = (
        <Cleave key={refName} htmlRef={(ref) => this.refs[refName] = ref}
          className={inputClassNames}
          options={options}
          placeholder={placeholder}
          type={type}
          value={this.props.user[refName]}
        />
      )
    } 
    return 

          <InputMask {...enrollmentInput}  maskChar=" " maskType='ssn'className='control'/> 

• javascript
• reactjs
• input
• masking

3 Answers 3

Once you detect the value in the input field is valid, you can copy the existing value and save it in your ponents state (this.state). Then replace the value inside the input element by the masked value. Finally use the value you picked before to send the form

As an example you could do the following:

class HiddenSsnInput extends Component {

    constructor(props) {
        super(props);
        this.state = {
            validSsnEntered: false,
            ssnValue: undefined,
        };
        this._onBlur = this._onBlur.bind(this);
    }

    isValid() {
        return this.state.validSsnEntered;
    }

    value() {
        return this.state.ssnValue;
    }

    _onBlur() {
        const entered = this.refs.ssnInput.value;
        if (isValidSsn(entered) ) { // Implement yourself
            this.setState({validSsnEntered: true, ssnValue: entered});
            // Clear the value in the input
            this.refs.ssnInput.value = maskedSsnInput(entered); // implement yourself
        } else {
            this.setState({validSsnEntered: false, ssnValue: undefined});
        }
    }

    render() {
        return <input ref={(ref) => this.refs.ssnInput} onBlur={this._onBlur} />;
    }
}

A parent ponent can simply grab the value and validity of the SSN while the ponent does not have to show the actual value to the user after entering.

Typed the code without any checking, so beware of typos

If you want to display only the last 4 digits, why not only taking the last 4 char of the string and hardcoding the Xs?

handleChange(event) {
  this.setState({fieldValue: event.target.value});
}

<input 
  type="text" 
  value={'xxx-xxx-' + this.state.fieldValue.substr(this.state.fieldValue.length - 4)}
  onChange={this.handleChanges} /> 

This way, you will be able to send this.state.fieldValue to the service.

I ran into similar issues as the OP and ended up creating a custom SSN ponent to take care of most it:

https://codesandbox.io/s/64qpz795on

I wanted to mask the input while typing. I wanted to option to display last 4 as digits instead of hidden by asterisks.

The rest of the app is using redux-form and material-ui. You'll see the redux change call in there to update redux store. I just styled my custom input to match the way I have most the other forms inputs.