みなさん、コウタロウです！！
今日はタイトルについて。
仕事で困った
テキストボックスの入力で半角英数のみと全角のみ入力できるテキストボックスを作成する必要があったが、ネットで調べても全然出てこない。
対象ブラウザはIEなのでime-modeを設定すれば全角入力は禁止できるが記号(!”#$%など)は入力できてしまう。
なんかどこでも使いそうな気がするけどちょっと調べてもぜんぜん情報が出てこない。
私みたいに困らないようにブログに書きます。
半角英数のみ入力したい！
全角のみ入力したい！
そんな方、必見ぜひ参考にして下さい。
※すいません、AngularJsです。
半角英数のみ
半角英数以外は入力されても削除する関数です。
【html】
<input type=”text” ng-model=”hankaku” ng-change=”chkHankaku(hankaku)”/>
【JavaScript】
chkHankaku(hankaku) {
this.$scope.hankaku = hankaku.replace(/[^A-Za-z0-9]/g, ”);
}
要件によっては小文字アルファベットは大文字にして欲しいときがありますよね。
そんな時は”toUpperCase”を使えばいいです。
こんな感じ
↓↓↓
hankaku.replace(/[^A-Za-z0-9]/g, ”).toUpperCase();
全角のみ
全角以外を入力した場合は、削除する関数です。
【html】
<input type=”text” ng-model=”zenkaku” ng-change=”chkZenkaku(zenkaku)”/>
【JavaScript】
chkZenkaku(zenkaku) {
this.$scope.zenkaku = zenkaku.replace(/[A-Za-z0-9-!”#$%&'()=<>,.?_\[\]{}@^~\\`\*\+\|;:\/ｱ-ﾝﾞﾟ]+/g, ”);
}
ポイントは半角カナも削除しているところです。
最後に
如何でしたか？
もし、半角英数のみ、全角のみ入力したい画面を作成したい場合は、ぜひこの関数をご利用下さい。
一通りチェック済みです！！
コメント