react日本語入力のmaxLength問題

inputのmaxLength問題

html5のinputタグでmaxLength属性を設定するだけで、全てのケースがOKではありません。
日本語を入力する場合、キーボードの確定ボタンを押さなければブラウザのmaxlengthチェックが走りません。しかし、確定ボタンを押す前にonChangeイベントがすでに発生しています。

その為、いっぱいに入力して確定ボタンを押さないまま、Submitをクリックすると、最大文字数を超えた文字列がサーバに送信されてしまいます。

対応案

次の２つの案が考えられます。

案1:onChangeイベントを制御する

inputのonChangeイベントハンドラーで最大文字数超えたら、modelデータを更新しないようにすれば、modelロジックを変更せずに最大文字数の制限を実現できます。

<input
  type="text"
  value={formData.name}
  onChange={(e) => {
    if (e.target.value.length <= 30) {
      this.props.nameChange(e);
    }
  }}
  maxLength={30}
/>

• デメリット 最後２文字しか入らない状態で「最後」を入力しようとすると、「さいご」の「さい」までが入力されたら、キーボードが消えてしまいます。つまり、漢字に変更できない場合がありますので、ユーザビリティが低下します。

案2:validate処理で文字数をしっかりチェックする

modelクラスで入力内容の最大文字数チェックをおこなって、サーバに送信する前にチェックします。

• modelクラス

setName(value) {
    return this.set('name', value)
      .setIn(['validations', 'nameIsValidated'],
        value.length > 0 && value.length <= 30);
  }

• submit処理

submitData(e) {
  const formData = this.props.myState.formData;
  if (formData.getIn(['validations', 'nameIsValidated'] === true) {
    // ここでサーバに送信
  } else {
    // バリデーションエラーを表示
  }
}