HTML DOM Input Email autocompleteプロパティの使い方を解説
HTML DOM Input Email autocompleteプロパティとは
HTML DOMのInput Email autocompleteプロパティは、メールアドレス入力フィールド(<input type="email">)におけるオートコンプリート(自動補完)機能の有効・無効を設定、または取得するためのプロパティです。有効に設定すると、ユーザーが過去に入力した値が候補として表示されるようになります。
構文
autocompleteプロパティの構文は以下のとおりです。
値の取得(on / off が返される)
inputEmailObject.autocomplete
値の設定
inputEmailObject.autocomplete = value
設定できる値
「value」には以下のいずれかを指定します。
| 値 | 説明 |
|---|---|
| on | オートコンプリートを有効にします。これがデフォルト値です。 |
| off | オートコンプリートを無効にします。 |
サンプルコード
Input Email autocompleteプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Email autocomplete</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-autocomplete</legend>
<label for="EmailSelect">User Email :
<input type="email" id="EmailSelect" placeholder="例: xyz@abc.com" autocomplete="off" autofocus>
</label>
<input type="button" onclick="addAutocomplete()" value="候補表示を有効化">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Suggestions: '+inputEmail.autocomplete;
function addAutocomplete() {
inputEmail.autocomplete = 'on';
divDisplay.textContent = 'Suggestions: '+inputEmail.autocomplete;
}
</script>
</body>
</html>実行結果
このコードを実行すると、以下のような出力が得られます。
「候補表示を有効化」ボタンをクリックする前の状態：
「候補表示を有効化」ボタンをクリックした後の状態:
まとめ
Input Email autocompleteプロパティを使うことで、JavaScriptから動的にメールアドレス入力フィールドの自動補完機能を制御できます。初期状態では「off」に設定していても、ボタン操作などのイベントをきっかけに「on」へ切り替えることで、ユーザーの利便性を高めるフォームを実装できます。個人情報を扱うフォームでは「off」を指定し、プライバシーへの配慮を行うことも重要です。
-
HTML DOM入力検索（Input Search）のautocompleteプロパティとは？使い方を徹底解説
HTML DOMのInput Search autocompleteプロパティは、type=searchが指定された<input>要素のautocomplete属性と連動するプロパティです。この属性には「on」または「off」の値を設定でき、「on」を指定するとWebブラウザが過去の入力履歴に基づいてユーザーのテキストを自動補完します。一方「off」を指定した場合は自動補完が行われません。 構文 autocompleteプロパティを設定する際の基本的な構文は以下の通りです。 searchObject.autocomplete = on|off 「on」を設定すると、ブラウザは以前の
-
HTML DOM Input Text autocomplete（オートコンプリート）プロパティの使い方
HTML DOM の Input Text autocomplete プロパティは、type=text が指定された <input> 要素の autocomplete 属性と連動するプロパティです。この属性には「on」または「off」のいずれかの値を指定でき、「on」を設定すると Web ブラウザはユーザーの過去の入力履歴に基づいてテキストを自動補完します。一方、「off」を設定した場合は自動補完が行われません。 構文 autocomplete プロパティを設定する際の構文は以下のとおりです。 textObject.autocomplete = on|off 「on」を指定すると