M

E

N

U

 

 

события формы

focus()  blur() focus() — фокус на элементе
blur() — фокус ушел с элемента
focusin()  focusout() focusin() — фокус на элементе и на его дочерних элементах
focusout() — фокус ушел с элемента и с его дочерних элементов
select() только для input type=text или для input type=area;
выделяет весь текст
change() устанавливает обработчик события при изменении элемента формы, но лишь тогда, когда событие зафиксировано, а элемент потерял фокус; лучше воспользоваться событием input в Javascript, там событие возникает сразу при изменении
input устанавливает обработчик события при изменении элемента формы СРАЗУ
submit() устанавливает обработчик события при отправке формы на сервер
 
 

focus() blur()

Функция focus() выполняется, когда фокус на элементе.
Функция blur() выполняется, когда фокус ушел с элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div id="main">
  <input type="text" />
  <br />
  <input type="text" />
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document).ready(function () {
   /*фокус на элементе*/
   $('input').focus(function () {
    $(this).css({'border': '2px solid #F00'});
   });
 
   /*фокус ушел с элемента*/
   $('input').blur(function () {
    $(this).css({ 'border': '1px solid #808080' });
   });
  });
 </script>
</body>
</html>
 
 
 

select()

Функция выделяет весь текст в элементе input с типом text или area.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  input, button {
   margin: 20px;
  }
 
  button {
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div id="main">
  <button>Select all text</button>
  <br />
  <input type="text" />
 </div>
 
 <script>
  $(document).ready(function () {
   $('button').click(function () {
    $('input').select();
   });
  });
 </script>
</body>
</html>
 
 
 

input

Функция устанавливает обработчик события при изменении элемента формы СРАЗУ.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  #main {
   margin: 20px;
  }
 </style>
</head>
<body>
 <div id="main">
  <input type="text" />
  &nbsp;&nbsp;&nbsp;
  <span></span>
 </div>
 <script>
  $(document).ready(function () {
   $('input').on('input', function () {
    $('span').text($(this).val());
   });
  });
 </script>
</body>
</html>
 
 
 

submit()

Функция устанавливает обработчик события при отправке формы на сервер.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  form {
   margin: 20px;
   border: 2px solid #00F;
   padding: 20px;
  }
 
  .a {
   color: #F00;
   display: none;
  }
 
  #submit1 {
   width: 65px;
   cursor: pointer;
  }
 
  #message {
   height: 100px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px;
   margin-left: -150px;
   text-align: center;
   line-height: 100px;
   font-size: 26px;
  }
 </style>
</head>
<body>
 <form method="post">
  <label>Username</label>
  &nbsp;&nbsp;
  <input id="username" type="text" autofocus="autofocus" />
  &nbsp;&nbsp;
  <span id="error1" class="a">Поле не заполнено</span>
  <br />
  <br />
  <label>Password&nbsp;</label>
  &nbsp;&nbsp;
  <input id="password" type="password" />
  &nbsp;&nbsp;
  <span id="error2" class="a">Поле не заполнено</span>
  <br />
  <br />
  <input id="submit1" type="submit" value="OK" />
 </form>
 <div id="message" hidden="hidden">Ошибка!</div>
 <script>
  $(document).ready(function () {
   /*поле Username теряет фокус*/
   $('#username').blur(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error1').hide();
     $('#message').hide();
    }
   });
 
   /*поле Password теряет фокус*/
   $('#password').blur(function () {
    if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     $('#error2').hide();
     $('#message').hide();
    }
   });
 
   /*кнопка OK была нажата*/
   $('form').submit(function () {
    if($('#username').val() == '') {
     $('#error1').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else if($('#password').val() == '') {
     $('#error2').css({ 'display': 'inline-block' });
     $('#message').css({ 'border': '1px solid #F00' }).show();
     return false;
    }
    else {
     alert("Форма успешно отправлена!");
    }
   });
  });
 </script>
</body>
</html>