HTMLフォームのautocomplete属性を使って「年齢」を強引に補完する方法

2023-05-18

フォームの自動補完に使用するautocomplete属性を使って「年齢」を強引に補完する方法をご紹介します｡

「年齢」を指定するautocomplete値は無いので
生年月日である「autocomplete="bday"」を使用するのですが

実機で確認したところ､bdayで補完できるのはiOSやMacのSafariのみですので､ご了承下さい｡

HTML 属性: autocomplete - HTML: HyperText Markup Language | MDN

やり方

まず､inputタグを作成し「autocomplete="bday"」を設定します｡

歳

classには「old」を振っておきます｡

<input type="text" class="old" autocomplete="bday" placeholder="年齢">

この時点で､iOSのSafariでは候補が表示されます｡YYYY/MM/DD形式で｡

input autocomplete bday

なので､YYYY/MM/DD形式で入力されたら､現在の日付と比較して年齢に変換するという方針でいきます｡

JS

こんなJSを作成しました｡

$(".old").on("input", function(){
	let val = $(this).val();
	//YYYY/MM/DD形式のとき
	if(val.match(/\d{4}\/\d{1,2}\/\d{1,2}/)){
		//誕生日
		let bday = new Date(val);

		//今日
		let today = new Date();

		//今年の誕生日
		let thisBday = new Date(today.getFullYear(), bday.getMonth(), bday.getDate());

		//年齢
		var age = today.getFullYear() - bday.getFullYear();

		if(today < thisBday){
			//今年まだ誕生日が来ていない
			age--;
		}

		$(this).val(age);
	}
});

バニラなJavaScriptならこう｡

document.getElementsByClassName("old")[0].addEventListener("input", function(){
	let val = this.value;
	if(val.match(/\d{4}\/\d{1,2}\/\d{1,2}/)){
		//誕生日
		let bday = new Date(val);

		//今日
		let today = new Date();

		//今年の誕生日
		let thisBday = new Date(today.getFullYear(), bday.getMonth(), bday.getDate());

		//年齢
		var age = today.getFullYear() - bday.getFullYear();

		if(today < thisBday){
			//今年まだ誕生日が来ていない
			age--;
		}

		this.value = age;
	}
});

これで､候補から年齢を入力することができました｡

input autocomplete bday 年齢に変換 iPhone Safari