HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOM入力検索のオートコンプリートプロパティ


HTML DOM入力検索のオートコンプリートプロパティは、type =” search”の要素のオートコンプリート属性に関連付けられています。オートコンプリート属性は「オン」または「オフ」の値を取ります。 on値は、Webブラウザーが以前の入力に基づいてユーザーテキストを自動的に入力する必要があることを指定し、それ以外の場合はfalseを指定します。

構文

以下は、-

の構文です。

オートコンプリートプロパティの設定-

searchObject.autocomplete = "on|off"

ここで、onは、Webブラウザーが以前の入力に基づいてユーザー入力を自動的に完了することを意味し、falseは、以前の入力に基づいてユーザー入力を完了しないことを意味します。デフォルトでオンに設定された値があります。

入力検索のオートコンプリートプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>Off the autocomplete in the above search field by clicking on the below button</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
   function changeAuto() {
      document.getElementById("SEARCH1").autocomplete = "off";
      document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOM入力検索のオートコンプリートプロパティ

上記のフィールドにテキストを入力すると、前の入力に基づいてテキストがオートコンプリートされていることがわかります-

HTMLDOM入力検索のオートコンプリートプロパティ

[オートコンプリートオフ]ボタンをクリックしても、オートコンプリートテキストはキャプチャされません-

HTMLDOM入力検索のオートコンプリートプロパティ

上記の例では-

最初に、type =” search”、name =” fruits”の要素を作成し、そのオートコンプリート属性をonに設定しました。これにより、以前の入力に基づいてテキストが完全になります。検索フィールドは、フォームデータをサーバーに送信するための[送信]ボタンも含むフォーム内にあります-

<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>

次に、ユーザーがクリックしたときにchangeAuto()メソッドを実行する「オートコンプリートオフ」ボタンを作成します-

<button onclick="changeAuto()">Autocomplete Off</button>

changeAuto()メソッドは、getElementById()メソッドを使用してタイプ「search」の要素を取得し、そのオートコンプリート属性値をオフに設定します。これは、テキストがオートコンプリートされなくなり、ユーザーが手動で完全なテキストを入力する必要があることを意味します。次に、innerHTMLプロパティ-

を使用して、IDが「Sample」の段落にこの変更に関するメッセージを表示します。
function changeAuto() {
   document.getElementById("SEARCH1").autocomplete = "off";
   document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}

  1. HTMLDOM入力検索に必要なプロパティ

    HTMLDOM入力のSearchrequiredプロパティは、要素のrequired属性に関連付けられています。必須プロパティは、フォームがサーバーに送信される前に検索フィールドに入力する必要があるかどうかを設定して返すために使用されます。これにより、必要な属性を持つ検索フィールドがユーザーによって空のままにされた場合、フォームは送信されません。 構文 以下は、-の構文です。 必要なプロパティの設定- searchObject.required = true|false ここで、trueは検索フィールドに入力する必要があることを表し、falseはフォームを送信する前にフィールドに入力する

  2. HTMLDOM入力テキストのオートコンプリートプロパティ

    HTML DOM入力テキストのオートコンプリートプロパティは、type =” text”の要素のオートコンプリート属性に関連付けられています。オートコンプリート属性は「オン」または「オフ」の値を取ります。 on値は、Webブラウザーが以前の入力に基づいてユーザーテキストを自動的に入力する必要があることを指定し、それ以外の場合はfalseを指定します。 構文 以下は、-の構文です。 オートコンプリートプロパティの設定- textObject.autocomplete = "on|off" ここで、onは、ブラウザが以前の入力に基づいてユーザー入力を自動的に完了することを