Изменение элементов формы: change, input, cut, copy, paste

Изменение элементов формы: change, input, cut, copy, paste

Здравствуйте! Продолжаем разбираться с событиями формы в JavaScript  и в этом уроке я расскажу о  таких особенных событиях как change, input, cut, copy, paste.  Это так называемые специальные события о них мы и поговорим в этом уроке.

События input, copy, paste, change

Событие change

Событие change происходит по окончании изменения значения элемента формы, когда это изменение уже зафиксировано, то есть  когда пользователь закончил ввод данных  и выбрал другое поле или другой  элемент на форме.

Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.

Вот пример события  change.

<input type="text" onchange="alert(this.value)"> <input type="button" value="Кнопка">

Для остальных же элементов: select, input type=checkbox/radio оно срабатывает сразу  непосредственно при выборе значения.

Событие input

Событие input срабатывает  сразу же при изменении значения текстового элемента и поддерживается всеми браузерами.

Пример использования:

<input type="text"> oninput: <span id="result"></span> <script>
  var input = document.body.children[0]; 
 input.oninput = function() { 
   document.getElementById('result').innerHTML = input.value; 
      }; 
</script>

В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress и следует использовать.

События cut, copy, paste

Эти события  конечно используются очень  редко. Они происходят при вырезании/вставке/копировании значения.

К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение – это отмена соответствующей операции.

Например, вот так:

<input type="text" id="input"> event: <span id="result"></span> 
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) 
  { result.innerHTML = event.type + ' ' + input.value; return false; }; 
  </script>

Пример: поле с контролем СМС

Как видим, событий несколько и они взаимно дополняют друг друга.

Посмотрим, как их использовать, на примере.

Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.

Читайте также  События: focus и blur

Как такое  можно реализовать?

Получается вот такая комбинация:

<input type="text" id="sms"> символов: <span id="result"></span> 
 <script>
  function showCount() { result.innerHTML = sms.value.length; } 
 sms.onkeyup = sms.oninput = showCount; 
 sms.onpropertychange = function() { 
  if (event.propertyName == "value") showCount(); } 
   sms.oncut = function() { setTimeout(showCount, 0); // на момент oncut значение еще старое }; 
</script>

Здесь мы добавили вызов showCount на все события, которые могут приводить к изменению значения.  Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией.

Есть и совсем другой простой, но действенный вариант: через setInterval регулярно проверять значение и, если оно слишком длинное, то обрезать его.

Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по onfocus, а прекращать – по onblur, вот так:

<input type="text" id="sms"> символов: <span id="result"></span> 
<script>
  var timerId; sms.onfocus = function() { 
  var lastValue = sms.value; timerId = setInterval(function() { if (sms.value != lastValue) { showCount(); lastValue = sms.value; } }, 20); }; 
sms.onblur = function() { clearInterval(timerId); }; 
function showCount() { result.innerHTML = sms.value.length; } 
</script>

Итоги

События изменения данных:

Событие Описание Особенности
change Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса. В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также onclick-обработчик или onpropertychange.
input Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от change. В IE8- не поддерживается, в IE9 не работает при удалении символов.
propertychange Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в event.propertyName. Используют для мгновенной реакции на изменение значения в старых IE. В IE9 не срабатывает при удалении символов.
cut/copy/paste Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт. Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.
Читайте также  Свойства элементов формы

Ещё особенность: в IE8- события change, propertychange, cut и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.

Задания

Вычисление процентов по вкладу

Создайте форму для автоматического вычисления процентов по вкладу.

Ставка фиксирована: 13% годовых. При включённом поле «капитализация» – проценты приплюсовываются к сумме вклада каждый месяц (сложный процент).

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: