HTMLフォームのautocomplete属性を使って「年齢」を強引に補完する方法
フォームの自動補完に使用する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形式で｡
なので､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;
}
});これで､候補から年齢を入力することができました｡
年齢の計算はこちらを参考にさせていただきました｡
以上､iOS限定ですがautocompleteを使って「年齢」を無理やり補完する方法でした｡
