Привет всем! Вот кусочек кода: при наведении мыши на кнопку “Вход” появляется форма с автофокусом на первом поле. Проблема такая: если несколько раз ввести в это поле какое-либо значение, заканчивая ввод кнопкой “Войти” самой формы, то при последующих тыках в само поле в автофокусе выпадает autocomplet-ный datalist с введёнными ранее значениями. Так вот, при попытке выбрать какое-либо значение в этом datalist с помощью мыши, как только под мышью оказывается участок этого datalist, исчезает сразу же вся эта форма! Т.е. выбрать ранее введёное значение можно только с помощью стрелок клавиатуры. И второй вопрос, если в открытой уже форме переставить курсор в нижнее поле, то как только мышь уводится за пределы этого поля, но находится в любом месте формы, автоматически фокус перетекает в первое поле, хотя его даже не кликаешь. Помогите, пожалуйста, исправить эти проблемы. Решение нужно на чистом JS, без JQuery. Спасибо!
Вот ссылка на “песочницу”: https://thimbleprojects.org/alessio18911/297272
Технически, когда ты наводишь мышкой на результаты автокомплита – ты уводишь мышку от блока формы, поэтому будут срабатывать соответствующие обработчики. В твоем случае можно подумать над несколькими вариантами решения проблемы:
- Выключить автокомплит для формы. Тогда все будет работать правильно, но без автокомплита (https://codepen.io/anon/pen/eRaGjP)
- Переработать вообще поведение показа формы, и сделать ее появление/скрытие по клику на кнопку “Вход”. Этот функционал можно реализовать либо через джс, либо сделать скрытый чекбокс, который будет контролировать отображение блока формы.
О! Спасибо огромное за ответ! Тогда подскажи, пожалуйста, как прописать “клик вне формы” на JS, чтобы она закрылась? Я новичок, с таким ещё не сталкивался )
Нужно отловить любые клики на странице. Получить узел по которому произошел клик. Пройтись по дереву родителей узла по которому произошел клик. Если среди родителей будет узел формы, значит клик произошел по форме.
https://jsfiddle.net/sepbLxxn/
function walkTop (node, testFunc, lastParent) {
while ( node && node !== lastParent ) {
if ( testFunc(node) ) {
return node;
}
node = node.parentNode;
}
}
var formElement = document.querySelector('form')
document.documentElement.addEventListener('click', function (event) {
var clickTarget = event.target
var formClick = walkTop(event.target, function (node) {
node === formElement
})
if (formClick) {
console.log('form click')
} else {
console.log('outside click')
}
}, false)
Дмитрий, спасибо, что не остались в стороне и уделили мне время и внимание. Смысл я уловил, но - как новичку в JS - понять сложно этот большой кусок кода. Не будете ли Вы так любезны пояснить мне его?
Эта функция принимает на вход DOM узел node и функцию testFunc . Вызывает функцию для каждого из родителей переданного DOM узла. При каждом вызове testFunc в нее передается аргумент - DOM узел, один из цепочки родителей node. Для какого узла testFunc вернула truthy значение, тот узел и будет результатом вызова walkTop.
Аргумент lastParent для текущей задачи не используется.
var formElement = document.querySelector('form')
Сохранил ссылку на узел формы. Его буду использовать для проверки произошел ли клик по этой форме.
document.documentElement.addEventListener('click', function (event) {
var clickTarget = event.target
var formClick = walkTop(event.target, function (node) {
node === formElement
})
if (formClick) {
console.log('form click')
} else {
console.log('outside click')
}
}, false)
Зарегистрировал обработчик кликов на корневом узле DOM-а. В обработчик клика аргументом передается объект event, а в event в свойстве target записана ссылка на узел по которому произошел клик (не путать с узлом на который навешан обработчик, ключевые слова для гугления темы - “делегирование событий”).
Используя walkTop, проверяю есть ли среди родителей узла по которому произошел клик узел формы formElement. Если есть, значит клик поизошел внутри формы, по одному из детей элемента формы.
Спасибо огромное!! )