半角数字のみ入力したい！というフォームを作る必要があったので、
入力許可した文字以外絶対入力させてやらないぞ！という頑固な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はよくないみたい。
注意書き（と報告相談）は必要ですね。