HTML autocorrect グローバル属性

値

取りうる値は次の通りです。

on または "" （空文字列）

綴りや句読点の誤りを自動修正する機能を有効にします。

off

編集可能なテキストの自動修正を無効にします。

<input> 要素型のうち、自動修正に対応していないものは、常に off の状態になります。password、email、url です。

編集可能なその他の要素については、上記以外の値を設定しても、常に on として扱われます。 <form> 内に含まれていない要素の既定値は on です。

<form> に含まれている場合、そのフォームに autocorrect の既定値が設定されている場合は、<button>、<fieldset>、<input>、<output>、<select>、<textarea> の各要素はその値を継承します。

例

基本的な例

この例は、基本的な autocorrect 属性の使用方法を示しています。

HTML

autocorrect 属性に異なる値を持つ 2 つの <input> 要素を記載しています。

<label for="vegetable">野菜: </label>
<input id="vegetable" name="vegetable" type="text" autocorrect="on" />

<label for="fruit">果物: </label>
<input id="fruit" name="fruit" type="text" autocorrect="off" />

結果

上記にある果物と野菜のテキスト入力項目に不正なテキストを入力してください。 お使いのブラウザーが自動修正に対応しており、端末で適切な修正が指定されている場合、野菜名の入力でタイプミスを自動修正できます。 果物の名前の項目では、タイプミスを修正しません。

自動修正の有効化と無効化

この例では、 autocorrect 属性を使用して自動修正を無効または有効にする方法を示しています。

HTML

HTML マークアップは、<button>、「名前」の <input> 要素（type="text"）、「経歴」の <textarea> 要素、および 2 つの <label> 要素を定義しています。

"username" の要素には autocorrect="off" が設定されています。名前の自動修正は煩わしいからです。 bio には autocorrect の値が指定されていません。つまり、有効になっているということです（off 以外の任意の要素を設定することもできます）。

<button id="reset">リセット</button>
<label for="username">名前: </label>
<input id="username" name="username" type="text" autocorrect="off" />
<label for="bio">経歴: </label>
<textarea id="bio" name="bio"></textarea>

<pre id="log"></pre>

#log {
  height: 75px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

button,
input,
textarea {
  display: block;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

このコードは、プロトタイプに autocorrect が存在するかどうかをチェックすることで、それが対応しているかどうかを確認します。 存在しない場合は、その事実が記録されます。 存在する場合は、各テキスト入力要素の autocorrect プロパティの値が記録されます。

ボタンにクリックハンドラーを追加し、入力テキストとログ出力をリセットできるようにします。

const resetButton = document.querySelector("#reset");
const userNameElement = document.querySelector("#username");
const bioElement = document.querySelector("#bio");

if (!("autocorrect" in HTMLElement.prototype)) {
  log("自動修正に対応していません");
} else {
  log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);
  log(`bioElement.autocorrect: ${bioElement.autocorrect}`);
}

resetButton.addEventListener("click", (e) => {
  userNameElement.value = "";
  bioElement.value = "";
});

結果

自動修正機能がブラウザーに対応している場合、「経歴」と「名前」の入力欄の下記にあるログ出力領域に、「経歴」の入力欄には有効であるが、「名前」の入力欄には有効ではないことを示すメッセージが表示されます。

名前と経歴のテキスト入力項目に不正なテキストを入力します。 端末に指定された単語の代替が存在する場合、この単語が「経歴」入力項目（のみ）のテキストの自動修正に使用されます。

仕様書

ブラウザーの互換性

関連情報

• すべてのグローバル属性
• spellcheck