DOM

HTMLElement.focus() メソッド

 編集:2022.10.02 by T.A.

[Edge]○。→

element をフォーカスします。

指定された要素にフォーカスを設定できる場合に有効。フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。

構文
element.focus()
element ElementHTMLElement
click()とfocus()

HTML:

<SPAN id=IdIn>[ここにマウスポインターが入るとclick()処理]</SPAN>
<SPAN id=IdIn2>[ここにマウスポインターが入るとfocus()処理]</SPAN><BR>
<INPUT id=IdTest>

JavaScript:

function Job(eve){ //mouseover時の処理:
  IdTest.click();  //テスト要素をクリックさせる。
}
function Job2(){  //mouseover時の処理2:
  IdTest.focus(); //テスト要素をフォーカスさせる。
}
function JobClick(eve){ //clickイベント時の処理:
  IdTest.value=IdTest.value+"Click "; //表示
}
function JobFocus(eve){ //focusイベント時の処理:
  IdTest.value=IdTest.value+"Focus "; //表示
}
IdIn.onmouseover=Job;   //mouseoverイベント割り当て。
IdIn2.onmouseover=Job2; //mouseoverイベント割り当て。
IdTest.onclick=JobClick; //clickイベント割り当て。
IdTest.onfocus=JobFocus; //focusイベント割り当て。

「マウス クリックをシミュレート」といっても違う感じ。

click()

focus()できない要素

HTML:

<SPAN id=IdIn>[ここにマウスポインターが入るとclick()処理]</SPAN>
<SPAN id=IdIn2>[ここにマウスポインターが入るとfocus()処理]</SPAN><BR>
<SPAN id=IdTest contenteditable>SPAN要素</SPAN>

JavaScript:

function Job(eve){ //mouseover時の処理:
  IdTest.click();  //テスト要素をclick()。
}
function Job2(){  //mouseover時の処理:
  IdTest.focus(); //テスト要素をfocus()。
}
function JobClick(eve){ //clickイベント時の処理:
  IdTest.innerHTML=IdTest.innerHTML+"Click "; //表示。
}
function JobFocus(eve){ //focusイベント時の処理:
  IdTest.innerHTML=IdTest.innerHTML+"Focus "; //表示。
}
IdIn.onmouseover=Job;   //mouseoverイベント割り当て。
IdIn2.onmouseover=Job2; //mouseoverイベント割り当て。
IdTest.onclick=JobClick; //clickイベント割り当て。
IdTest.onfocus=JobFocus; //focusイベント割り当て。

編集可能でない要素はフォーカスできない。


テスト