HTMLDOM入力検索オートフォーカスプロパティ
HTML DOM入力検索のautofocusプロパティは、HTMLの要素のautofocus属性に関連付けられています。このプロパティは、ページが読み込まれたときに入力検索フィールドが自動的にフォーカスされるかどうかを設定または返すために使用されます。
構文
以下は、-
の構文です。オートフォーカスプロパティの設定-
searchObject.autofocus = true|false
ここで、trueは検索フィールドがフォーカスを取得する必要があることを表し、falseはそれ以外の場合を表します。デフォルトではfalseに設定されています。
例
入力検索のオートフォーカスプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the below
button.</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
function FocusVal() {
var R = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field has autofocus property
set to "+R;
}
</script>
</body>
</html>に設定されています 出力
これにより、次の出力が生成されます-
CHECKFOCUSボタンをクリックすると-
上記の例では-
最初に、type =” search”、id =” SEARCH1”、name =” fruits”の要素を作成し、autofocus属性をtrueに設定しました。検索フィールドはフォーム内にあります-
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus> </form>
次に、ユーザーがクリックしたときにFocusVal（）メソッドを実行するボタンCHECKFOCUSを作成します-
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
FocusVal（）メソッドは、getElementById（）メソッドを使用したタイプ検索で入力要素を取得し、そのオートフォーカスプロパティを取得します。 autofocusプロパティは、検索フィールドのautofocus属性値に応じてtrueとfalseを返します。この値は変数fに割り当てられ、innerHTMLプロパティ-
を使用して、IDが「Sample」の段落に表示されます。function FocusVal(){
var f = document.getElementById("SEARCH1").autofocus;
document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
} -
HTMLDOM入力検索値プロパティ
HTML DOM入力検索値プロパティは、type =” search”を持つ入力要素とvalue属性に関連付けられています。入力検索フィールド値属性の値を返すか、設定するために使用されます。このプロパティは、検索フィールドのデフォルト値を指定するために使用され、値をユーザー入力に変更します。 構文 以下は、-の構文です。 値プロパティの設定- searchObject.value = text; ここでは、検索フィールドの値を指定するためにテキストが使用されています。 例 入力検索値プロパティの例を見てみましょう- <!DOCTYPE html> <html>
-
HTMLDOM入力検索タイププロパティ
HTML DOM入力検索タイププロパティは、type =” search”を持つ入力要素に関連付けられています。入力検索要素の検索を常に返します。 構文 以下は、検索タイププロパティの構文です- searchObject.type 例 入力検索タイププロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Search type property</h1> <form> FRUITS: <input type="search" id="SE