【正規表現】アラートを出しつつ入力内容を制御する【javascript】

公開日:2023年3月5日

Categoryweb制作

Contents

1 郵便番号の入力フォームを制御したい
2 javascriptを使ってフォームの入力内容を制御
3 アラートを出しつつ入力内容を制御するソース
4 引き続き検討したいところ
5 まとめ

郵便番号の入力フォームを制御したい

入力必須項目とした郵便番号で、数字・ハイフン以外を入力不可にしたい。調べてみると、type属性かpattern属性を使用して制御できるようだ。

https://omkz.net/form-input-number/
数字のみ入力できるinputを作る2つの方法 | りーほーブログ

確かにこれで希望している動きが可能だが、デフォルトで使っているフォームだと思うように動作しなかったので、javascriptで制御する事を検討する。余談だが、上記ページにもあるように、フォーム周りで各ブラウザ毎の挙動が違いすぎるのは本当にどうにかして欲しい。

javascriptを使ってフォームの入力内容を制御

今回は数字とハイフンだけ入力出来ればOKなので、ずばりの記事を発見。

https://sea-weblog.com/creator/creator-js/number-replace/
[フォーム] 数字とハイフンだけ入力したい｜sea weblog

数字とハイフン以外は入力出来ない(replaceで削除される)のでこれでOK。ただ、反応が無いように見えるのもちょっと寂しい。アラートを出しつつ表示出来ないかと言うところで、下記の記事を発見。

https://allabout.co.jp/gm/gc/23854/3/
3/7 JavaScriptで入力チェック・文字を入力制限する方法 [ホームページ作成] All About

デモページを見ると確かに、数字とハイフン以外を入力するとアラームが表示される。だが、引き続き入力自体は可能になるので、これら二つをガッチャンコさせる。

アラートを出しつつ入力内容を制御するソース

document.addEventListener('DOMContentLoaded', function() {
	var targets = document.getElementsByClassName('hoge');
	for (var i=0 ; i<targets.length ; i++) {
		targets[i].oninput = function () {
			var alertelement = this.parentNode.getElementsByClassName('huga');
			if( ( this.value != '') && ( this.value.match( /[^\d\-]+/ )) ) {
				if( alertelement[0] ) { alertelement[0].innerHTML = '表示させたいアラートをここに記述'; }
				let str = $(this).val();
				$(this).val(str.replace(/[^\d\-]/g, ""));
			}
			else {
				if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
			}
		}
	}
});

これでclass名にhogeを振ったinputに、半角数字・ハイフン以外を入力するとhugaとクラス名を振った要素にアラートを表示させることが可能になった。なんかもっとスマートに出来る気もするがとりあえず。桁数に関してはmaxlength,minlength等で制御するところか。