focus
16 March, 2023
0
0
0
Contributors
About
The focus event is triggered when an element receives focus, either through user interaction or through JavaScript code. This event can be used to perform actions when an element becomes the active element in a page, such as changing its appearance or behaviour.
The focus event is typically used with form elements, such as input fields and buttons, to perform actions when the user focuses on these elements. For example, you might use the focus event to highlight an input field when the user clicks on it, or to change the behaviour of a button when it becomes the active button on a page.
Event listener
Here's an example of how you might use the focus event to change the background colour of an input field when the user focuses on it:
HTML
<label for="input-field">Enter your name:</label>
<input type="text" id="input-field">JavaScript
const inputField = document.getElementById('input-field');
inputField.addEventListener('focus', function(event) {
event.target.style.backgroundColor = 'yellow';
});Here, we're adding a focus event listener to an input field. When the user clicks on the input field and it receives focus, the event listener will be triggered and the background colour of the input field will be changed to yellow.
Property
Here's an example of using the onfocus property with a function assigned to it:
// JavaScript code
const myInput = document.getElementById('my-input');
myInput.onfocus = function() {
console.log('Input field focused');
// Do something else, such as changing the background color of the input field
};Here, we first get a reference to the <input> element with the ID "my-input" using document.getElementById(). Then we assign a function to the onfocus property of the myInput element.
The assigned function is called whenever the input field receives focus, which can happen when the user clicks on the input field or uses the keyboard to navigate to it. We simply log a message to the console, and you can add additional actions to this function, such as changing the background colour of the input field or displaying a tooltip.
Inline
You can also use the onfocus attribute inline in HTML to specify a function that should be executed when an element receives focus:
HTML
<label for="input-field">Enter your name:</label>
<input type="text" id="input-field" onfocus="highlightInputField()">JavaScript
function highlightInputField() {
var inputField = document.getElementById('input-field');
inputField.style.backgroundColor = 'yellow';
}Here, we're using the onfocus attribute to specify the highlightInputField() function as the event handler for the focus event on the input field. When the input field receives focus, the highlightInputField() function will be called and the background colour of the input field will be changed to yellow.
However, it's generally considered better practice to use addEventListener() to register event handlers, as this provides more flexibility and separates the JavaScript code from the HTML markup.
Programmatic trigger
There is also a focus() method which can be used to programmatically set the focus on an element:
HTML
<label for="input-field">Enter your name:</label>
<input type="text" id="input-field">
<button onclick="setFocus()">Set Focus</button>JavaScript
function setFocus() {
const inputField = document.getElementById('input-field');
inputField.focus();
}Here, we have an input field and a button. When the button is clicked, the setFocus() function is called, which retrieves the input field using getElementById() and then calls its focus() method to set the focus on the input field.
Note that in this example we're using onclick to register the event handler for the button click event, but it's generally better to use addEventListener() instead.
javascript
event
javascriptevent