女子WEBエンジニアのTechメモスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。読者です読者をやめる読者になる読者になる女子WEBエンジニアのTechメモ都内の某企業でマーケッターやってます。営業→WEBエンジニア・オフショア開発チーム駐在→マーケッター(SEO)ちょっと便利だなと思ったことをメモしています。2016-08-10指定した形式の文字以外入力させないフォームをinputタグ1行でつくるシェアするBookmark!FacebookTwitterGoogle+Pocket半角数字のみ入力したい!というフォームを作る必要があったので、入力許可した文字以外絶対入力させてやらないぞ!という頑固なformを外部JSファイルやscript要素なしで、inputタグ1行で実装しました。inputタグのみで実装するメリットinputタグのみで、許可した文字以外入力できないバリデーションを作るデモはこちらさらに強化したい人は追記をあとがきinputタグのみで実装するメリットフォームのJSバリデーションには、・次の項目に移った時に、入力した内容をチェックする・サブミットボタンを押したときに、入力した内容をチェックする(・よさそうなjQueryのPluginを探してきて、そのまま使っちゃう)など、様々な方法がありますが、私的には、この強そうな入力フォームがお気にいりです。バリデーションとか書くの面倒だし。いえセキュリティ的にはあまあまなので、バックでちゃんと作らないといけないんですけどね。したものならこれでもいいんじゃないでしょうか。inputタグのみで、許可した文字以外入力できないバリデーションを作るベースとなるhtmlはこちら。今回はこれにバリデーションをつけます。type=&#34;text&#34;&gt;onKeyup属性を使って、バリデーションルールを追加します。onKeyup=&#34;this.value=this.value.replace(/[^0-9]+/i,&#39;&#39;)&#34;&gt;*onkeyup属性は、指定した要素の上で、キーボードのキーが放された時に起動するスクリプトを指定します。*Javascriptのreplace関数は、文字列の中のkeywordを置換する関数です。flags])今回は、「ルールに沿わない文字列は消す!!」とするために、''に置換するようにしています。(=keywordに一致する文字を削除する、と同じ意味。半角数字の他にも、色々なルールを設定できます。onblur=&#34;this.value=this.value.replace(/[^0-9]+/i,&#39;&#39;)&#34;&gt;onblur属性は、指定した要素からフォーカスを外すときに動作します。あとがき勝手にこのフォームで実装してたら、テストをした子が「なにこのフォーム、文字入力できないんだけど。」と言っていたので、あまりUIはよくないみたい。注意書き(と報告相談)は必要ですね。2年使ってるgitで初めてのエラーメッセー...WordPressのdebugモードを使う»プロフィール都内の某企業でマーケッター(SEO)やってます。趣味は休日のプログラミング。入社後に営業からWEBエンジニアに職種チェンジし、アジアのオフショア開発チーム駐在→現在。嬉しすぎて小躍りします。Bronzeへの第一歩。