onfocus-evenement

DOM events FocusEvent

Definitie en gebruik

Het onfocus-evenement vindt plaats wanneer een element de focus krijgt.

Het onfocus-evenement wordt meestal gebruikt samen met <input>, <select> en <a>.

Tip: Het onfocus-evenement wordt gebruikt samen met onblur eventomgekeerd.

Tip: Het onfocus-evenement lijkt op onfocusin event. Het belangrijkste verschil is dat het onfocus-evenement niet opbubbelt. Dus als je wilt controleren of een element of een van zijn kinderen de focus krijgt, kun je het onfocusin-evenement gebruiken. Maar je kunt ook het onfocus-evenement gebruiken om dit te bereiken. addEventListener() Methodevan useCapture Gebruik parameters om dit te bereiken.

Voorbeeld

Voorbeeld 1

Voer JavaScript uit wanneer het invoerveld de focus krijgt:

<input type="text" onfocus="myFunction()">

Try it yourself

Onder de pagina zijn meer TIY voorbeelden beschikbaar.

Syntax

In HTML:

<element onfocus="myScript">

Try it yourself

In JavaScript:

object.onfocus = function(){myScript};

Try it yourself

In JavaScript, gebruik de addEventListener() Methode:

object.addEventListener("focus", myScript);

Try it yourself

Opmerking:Internet Explorer 8 of oudere versies ondersteunen dit niet addEventListener() Methode。

Technical details

Bubble: Not supported
Cancelable: Not supported
Event types: FocusEvent
Supported HTML tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <title>
DOM version: Level 2 Events

Browser support

Event Chrome IE Firefox Safari Opera
onfocus Supported Supported Supported Supported Supported

More examples

Example 2

Use the "onfocus" and "onblur" events together:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Try it yourself

Example 3

Clear the input field that has received focus:

/* When the input field receives focus, replace its current value with an empty string */
<input type="text" onfocus="this.value=''" value="Blabla">

Try it yourself

Example 4

Event delegation: set the useCapture parameter of addEventListener() to true:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Try it yourself

Example 5

Event delegation: using the focusin event (not supported by Firefox):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Try it yourself

DOM events FocusEvent