заменить запятую на точку на лету

Question

Я пытаюсь заменить «запятую» на «точку» в типе ввода «Текст». В настоящее время в моем коде я ограничиваю свой шаблон "^([0-9]*[.])?[0-9]*$", но я хотел бы разрешить пользователю вводить "запятую" (,), но автоматически заменять на "period" (.)

<input
  type="text"
  ref="double"
  pattern="^([0-9]*[.])?[0-9]*$"
  onKeyUp={this.validateKeyEvents.bind(this)}
  value={this.state.value}
  onChange={this.inputChanged.bind(this)}
/>



validateKeyEvents(event){
    console.log("event occured" + event.charCode);
    var keyVal = event.charCode;
    if(keyVal == 188)
    {
      console.log("comma");
      event.preventDefault();
      var UserInput = ReactDOM.findDOMNode(this.refs.double).value;
      UserInput = UserInput.replace(/,/g, ".");
      return true;
    }
    else if(keyVal == 8 || keyVal == 46)
      return true;
    else if(keyVal == 0)
      return true;
    else if (keyVal == 9 || keyVal == 13 || keyVal == 110 || keyVal == 190)
      return true;
    else if(keyVal >=48 || keyVal <= 57)
      return true;
    else if(keyVal >= 96 || keyVal <= 105)
      return true;
    else if(keyVal >=35 || keyVal <=40)
      return true;
    else
      return false;
  }



inputChanged(event) {
    var value = event.target.validity.valid
      ? event.target.value
      : this.state.value;
    this.setState(
      {
        value: value
      });
  }

Answer 1

Вы можете просто передать замененную строку в качестве значения для input:

<input 
  value={this.state.value.replace('.', ',')} 
  onChange={e => this.setState({value: e.target.value})} ... />

И просто изменить свой шаблон, чтобы использовать запятую вместо точки.

pattern="^([0-9]*[,])?[0-9]*$"

Answer 2

Итак, я сделал следующие изменения:

в validateKeyEvents я добавил

if(keyVal == 188)
{
  return true;
}

и во вход

              <input
                type="text"
                pattern="^([0-9]*[.?,])?[0-9]*$"
                onKeyUp={this.validateKeyEvents.bind(this)}
                value={this.state.value.replace(',','.')}
              />