LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.input {
  font-size: 28px;
  width: 200px;
  margin: 16px;
}
JS
class PhoneInput extends React.Component {
  constructor(props) {
    super(props);
  }
  
  sanitizeInput(input) {
    return input.replace(/[^0-9]/g, '');
  }
  
  // (987) 654-3210
  formatPhoneNumber(phoneNumber) {
    let formattedNumber = phoneNumber.split('');
    if (formattedNumber.length > 0) {
      formattedNumber.splice(0, 0, '(');
    }
    
    if (formattedNumber.length > 4) {
      formattedNumber.splice(4, 0, ') ');
    }
    
    if (formattedNumber.length > 8) {
      formattedNumber.splice(8, 0, '-');
    }
    
    return formattedNumber.join('');
  }
  
  handleChange = (e) => {
    const inputValue = e.target.value;
    const sanitizedInput = this.sanitizeInput(inputValue);
    e.target.value = this.formatPhoneNumber(sanitizedInput);
  }
  
  render() {
    return (
      
    );
  }
}

ReactDOM.render(, document.getElementById('main-container'));
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv