Главная страница / Занятия / #8 / События и методы focus и blur и работа с ними в JavaScript

События и методы focus и blur и работа с ними в JavaScript

Задание:

Рассказать про события и методы focus и blur и про работу с ними в JavaScript.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>События и&nbsp;методы focus и&nbsp;blur и&nbsp;работа с&nbsp;ними в&nbsp;JavaScript</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <form name="myForm">
      <input name="firstInput" value=""><br><br>
     </form>
    </body>
   
   </html>

CSS–разметка (styles.css):

   input		{ outline: none; border: 1px solid #d0d0d0; }
   .activeInput		{ border: 1px solid #ff0000; }

JS–скрипты (scripts.js):

   window.onload = function()
   {
    document.forms.myForm.firstInput.onfocus = function()
    {
     document.forms.myForm.firstInput.classList.add('activeInput');
    };
   
    document.forms.myForm.firstInput.onblur = function()
    {
     document.forms.myForm.firstInput.classList.remove('activeInput');
    };
   
    document.forms.myForm.firstInput.focus();
   };

Результат:

Результат выполнения задания можно посмотреть здесь.