Какое событие будет вызвано, когда элемент будет сфокусирован в HTML?

Опубликовано: 14 Августа, 2022

Когда пользователь взаимодействует с элементами HTML, HTML позволяет событиям запускать действия в браузере, такие как щелчок пользователя по элементу, фокус на элементе или фокус вне его и т. д. События, связанные с фокусом, содержатся внутри объекта DOM FocusEvent . Onfocus срабатывает, когда элемент находится в фокусе в HTML.

Событие DOM onfocus происходит в тот момент, когда элемент находится в фокусе. Теги, с которыми чаще всего используется событие onfocus , это <a>, <select> и <input>. Теги, поддерживаемые событием HTML DOM onfocus, — это все теги, кроме <html>, <param>, <script>, <title>, <style>, <meta>, <head>, <br>, <iframe>, <base. >, <бдо>.

Примечание . Событие onfocus отличается от события onfocusin тем, что предыдущее не всплывает.

Синтаксис:

Используя метод addEventListener():

Element.addEventListener("focus",function(cb){});

Использование в HTML:

<element onfocus="functionFocus">

Пример 1: В этом примере, когда элемент ввода находится в фокусе, его контур удаляется и получает рамку черного цвета. Также сообщение сообщает, когда элемент находится в фокусе и когда он не в фокусе.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Example 1</title>
    <style>
        .container {
            background-color: green;
            height: 200px;
            width: 400px;
            font-size: 18px;
            text-align: center;
            color: whitesmoke;
            margin: auto;
            font-family: "Courier New", Courier, monospace;
        }
          
        input {
            height: 35px;
            width: 250px;
            outline: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>GeeksforGeeks</h2>
        <input type="text">
    </div>
    <script>
        let container = document.querySelector(".container");
        let input = document.querySelector("input");
  
        let addP = document.createElement("p");
        let removedP = document.createElement("p");
  
        input.addEventListener("focus", function(e) {
            addP.innerText = "The input element is in focus";
            container.appendChild(addP);
            input.style.border = "2px solid black";
            input.style.outline = "none";
  
        });
  
        input.addEventListener("blur", function(e) {
            container.removeChild(addP);
            removedP.textContent = "The input element is out of focus";
            container.appendChild(removedP);
  
        });
  </script>
</body>
</html>

Выход:

Пример 2: В этом примере, когда пользователь нажимает на данную ссылку, элемент привязки становится в фокусе, и его цвет меняется на указанный цвет «#C197D2», когда он находится в фокусе.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Example 2</title>
    <style>
        .container {
            background-color: green;
            height: 150px;
            width: 450px;
            font-size: 22px;
            font-weight: bolder;
            text-align: center;
            color: whitesmoke;
            margin: auto;
        }
          
        p:nth-child(2n) {
            color: black;
        }
          
        a {
            color: whitesmoke;
        }
    </style>
</head>
<body>
    <div class="container">
          
<p>GeeksforGeeks</p>
  
          
<p>Click here to visit <a href="https://www.geeksforgeeks.org/">
          GeeksforGeeks</a>website </p>
  
    </div>
    <script>
       let a = document.querySelector("a");
        a.addEventListener("focus", function(e) {
            a.style.color = "#C197D2";
        })
    </script>
</body>
</html>

Выход:

Picked HTML

Какое событие будет вызвано, когда элемент будет сфокусирован в HTML?

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ