input textで入力文字種を制限するサンプル

1 min read読了の目安(約1100字

背景

Webフォームのテキストエリアに指定した文字だけ入力させたい。

input要素には pattern 属性というものがあるが、バリデーションがsubmitイベントのタイミングでが走るため、違うイベントにhookさせたい場合は自前で実装する必要がある。

下記では、changeイベントにhookさせて、DenyAllow方式で定義した入力文字種から外れた文字をテキストエリアから削除するサンプルを公開する。

サンプルコード

html
<textarea onchange="validateText(this)"></textarea>
javascript
      var validateText = function(e) {
        var validated = '';
        Array.prototype.forEach.call(e.value, function(c) {
          if (
            c.match(/[A-Za-z0-9]/)
            || c.match(/[ -/:-@\[-~]/)
            || c.match(/[\n|\r\n|\r]/)
            || c.match(/[\u30a0-\u30ff\u3040-\u309f]/)
            || c.match(/[ヲ-゚]/)
          ) {
            validated += c;
          }
        });
        e.value = validated;
      }

動作例

フォーカスが外れたタイミングでテキストエリアからemojiが消える

before after

補足情報

文字種 正規表現
半角英数字 /[A-Za-z0-9]/
半角記号 /[ -/:-@\[-~]/
改行コード /[\n|\r\n|\r]/
平仮名・片仮名 /[\u30a0-\u30ff\u3040-\u309f]/
半角片仮名 /[ヲ-゚]/
漢字(CJK) /[\u4E00-\u9FFF]/