読者です 読者をやめる 読者になる 読者になる

女子WEBエンジニアのTechメモ

都内の某企業でマーケッターやってます。営業→WEBエンジニア・オフショア開発チーム駐在→マーケッター(SEO)ちょっと便利だなと思ったことをメモしています。

指定した形式の文字以外入力させないフォームをinputタグ1行でつくる

半角数字のみ入力したい!というフォームを作る必要があったので、

入力許可した文字以外絶対入力させてやらないぞ!という頑固なformを
外部JSファイルやscript要素なしで、inputタグ1行で実装しました。

inputタグのみで実装するメリット

フォームのJSバリデーションには、

・次の項目に移った時に、入力した内容をチェックする
・サブミットボタンを押したときに、入力した内容をチェックする
(・よさそうなjQueryのPluginを探してきて、そのまま使っちゃう)

など、様々な方法がありますが、私的には、この強そうな入力フォームがお気にいりです。
バリデーションとか書くの面倒だし。

とはいえセキュリティ的にはあまあまなので、バックでちゃんと作らないといけないんですけどね。

ちょっとしたものならこれでもいいんじゃないでしょうか。

inputタグのみで、許可した文字以外入力できないバリデーションを作る

ベースとなるhtmlはこちら。
今回はこれにバリデーションをつけます。

<input type="text">

onKeyup属性を使って、バリデーションルールを追加します。

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]+/i,'')">

*onkeyup属性は、指定した要素の上で、キーボードのキーが放された時に起動するスクリプトを指定します。

*Javascriptのreplace関数は、文字列の中のkeywordを置換する関数です。

文字列.replace(置換のために検索するkeyword, ←をどんなkeywordに置換するか[, flags])

今回は、「ルールに沿わない文字列は消す!!」とするために、''に置換するようにしています。
(=keywordに一致する文字を削除する、と同じ意味。)

「置換のために検索するkeyword」の部分は正規表現が使えるので、
半角数字の他にも、色々なルールを設定できます。

デモはこちら

↓↓DEMOはこちら↓↓
バリデーションdemo

さらに強化したい人は追記を

右クリックをつかったコピペにも対応するため、onblur属性にも追加しました!

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]+/i,'')" onblur="this.value=this.value.replace(/[^0-9]+/i,'')">

onblur属性は、指定した要素からフォーカスを外すときに動作します。

あとがき

勝手にこのフォームで実装してたら、テストをした子が
「なにこのフォーム、文字入力できないんだけど。バグじゃん。」
と言っていたので、あまりUIはよくないみたい。

注意書き(と報告相談)は必要ですね。