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

背景

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
平仮名・片仮名	/[\u30a0-\u30ff\u3040-\u309f]/
半角片仮名	/[ｦ-ﾟ]/
漢字(CJK)	/[\u4E00-\u9FFF]/