События формы
Коллеги доброго времени суток, проблема следующая:
На странице есть input в который пользователь вводит число, какое нибудь не важно. Далее скрипт на сервер отправляет данные. Теперь собственно вопрос: я ловлю событие input'а :
document.addEventListener('input', function(e) {
e = e || window.e;
var target = e.target || window.target;
while (target != this) {
if (target.tagName != 'INPUT') return;
if (target.hasAttribute('data-action')) {
if (target.getAttribute('data-action') == 'refresh') {
console.log(target.value);
} else return;
} else return;
target = target.parentNode;
}
С тем что происходит внутри события все понятно, надеюсь. НО!!! как сделать, что бы в консоле выводилось не каждое value, которое выводит пользователь а последнее. Т.е. я ввожу например 50, сначала в консоле выводится 5 а потом 50, а как сделать что бы выводило сразу 50. Выводить число нужно с задержкой, т.е. пользователь что то ввел, ему дается 2 секунды, а потом выводится в консоль его число. Примерно так. |
e - событие
target - записали в переменную можно без этих строк, суть не в них |
Вопрос, в том, как выводить в консоль, только одно число а не каждое, которое ввел пользователь. Т.к. input (событие) срабатывает при каждом изменении поля input, нужно взять только последнее число, через 2 секунды после
|
заменить событие например на
el.addEventListener('blur', function(e) { // потеря фокуса инпутом
|
Rise, а в чем бред то??????? с точки зрения кроссбраузерности и делегирования в чем проблема то, везде работает!!!!!
Есть проблема и я задал вопрос, если не поняли вопроса так и скажите... |
Цитата:
document.addEventListener('focusout', function(e) { // потеря фокуса инпутом
|
А говорить про бред это детский сад, форум для того и создан, одни просят помощи, а другие если могут помогают, по мойму все нормально
|
Цитата:
|
j0hnik, в целом работает, но работает когда мышкой кликаешь в другое место, суть та же если рядом поставить кнопку.
А нужно что бы пользователь ввел какое то число, прошло 2 секунды а это число вывелось в консоль ну или в блок, какой нибудь, автоматом. |
Цитата:
|
laimas, инпут не один. есть список элементов, внутри каждого есть инпут. Необходимо определить какой элемент мы затронули.
Что глупого то?????? |
Rise, сайт работает от ie10+
|
Цитата:
|
laimas,
А что не понятного то в моем вопросе?????? При чем тут делегирование и кроссбраузерность????????? Я задал вопрос, как из поля вытащить value и вывести его в консоль, не каждый раз а через какое то время, при этом число должно быть последним, которое ввел пользователь.... Извиняюсь если задал изначально вопрос некорректно))))))))) |
Rise,
да без разницы на кроссбраузерность!!! |
Цитата:
|
Суть в том, что пользователь ввел какое то число, а через какое то время, если он закончил ввод вывести в консоль это число!!!!!!!!!
Вопрос как это сделать |
laimas, покажите как это сделать....
|
Rise, что в нем бредового???????
|
ясно
|
Видимо разное развитие
|
Цитата:
Если ваши поля присутствуют на странице, то установите обработчики прямо на них, и вам поможет onblur, который не всплывает, а поэтому не подходит под делегирование. |
laimas, blur срабатывает только при потере фокуса, а нужно что бы автоматом выводились символы в консоль, без дополнительных действий
|
Ладно, все равно спасибо, разберусь
|
Цитата:
Можно и таймер, но при фокусе если таймер запущен уже (другим полем), то очищать его, а по отпусканию кнопки запускать новый. |
laimas, в том и дело, что нет кнопки, с кнопкой то все просто, тык и работает, это сделано. Нужно не фокус искать, а отслеживать изменение input'а
|
Цитата:
Что же нужно обрабатывать, что знать, что значение поля изменилось? |
Rise, спасибо, )))))))))) пока баталии развивались, я то же самое сделал. Проблема оказалась в очистке таймера.
|
laimas,
Изменение: change, input, cut, copy, paste - https://learn.javascript.ru/events-change |
laimas, в моем случае это событие input, хотя так же все работает и после keyup. Во втором случае можно проверить быстро что ввел пользователь. Разрешить ему определенные кнопки
|
Rise, единственное чем отличается твой и мой код, это то что ты убрал target = target.parentNode;
|
Роман Андреевич,
вот спасибо. Это вам нужно почитать. Кстати ваш код с ошибками. С атрибутами сами разбирайтесь, откуда они появляются, а делегирования не требуется.
[].forEach.call(document.querySelectorAll('input'), function() {
this.addEventListener('input', function (e) {
e = e.target;
clearTimeout(e.timeoutId);
e.timeoutId = setTimeout(function () {
console.log(e.value);
}, 2000);
})
})
Только я имел ввиду один таймер для всех. Но чего вы там делаете, бог его знает. |
laimas, спасибо за помощь
|
Rise, да не куда сочинять, все равно спасибо, все равно с вашей помощью вопрос решился, за что вам большое спасибо
|
| Часовой пояс GMT +3, время: 18:00. |