Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2017, 03:01
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 30

Исчезает форма при наведении мыши на datalist
Привет всем! Вот кусочек кода: при наведении мыши на кнопку "Вход" появляется форма с автофокусом на первом поле. Проблема такая: если несколько раз ввести в это поле какое-либо значение, заканчивая ввод кнопкой "Войти" самой формы, то при последующих тыках в само поле в автофокусе выпадает autocomplet-ный datalist с введёнными ранее значениями. Так вот, при попытке выбрать какое-либо значение в этом datalist с помощью мыши, как только под мышью оказывается участок этого datalist, исчезает сразу же вся эта форма! Т.е. выбрать ранее введёное значение можно только с помощью стрелок клавиатуры. И второй вопрос, если в открытой уже форме переставить курсор в нижнее поле, то как только мышь уводится за пределы этого поля, но находится в любом месте формы, автоматически фокус перетекает в первое поле, хотя его даже не кликаешь. Помогите, пожалуйста, исправить эти проблемы. Решение нужно на чистом JS, без JQuery. Спасибо! На всякий случай код в "песочнице": https://thimbleprojects.org/alessio18911/297272/

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
     </head>
     <body>
          <div class="enter-btn-container">
               <div class="enter">Вход
                    <form class="form" name="form" action="#" method="get">
                         <input class="input" type="text" name="login">
                         <input class="input" type="password" name="login">
                         <button type="submit">Войти</button>
                    </form>
               </div>
          </div>
     </body>
</html>


var enterBtn = document.querySelector(".enter-btn-container"),
	  enterForm = enterBtn.querySelector(".form"),
	  enterField = enterForm.querySelector(".input");
			
	  enterBtn.addEventListener("mouseover", function(){
	       enterForm.classList.add("form-show");
	       enterField.focus();
	  });
			
	  enterForm.addEventListener("mouseout", function(){
	       enterForm.classList.remove("form-show");
	  });


body {
     font-family: "Arial", sans-serif;
     padding: 5px 25px;
     font-size: 24px;
     margin: 0;
}

.enter-btn-container {
     width: 100px;
     padding: 10px 0;
}

.enter {
     position: relative;
     box-sizing: border-box;
     padding: 5px 15px;
     text-align: center;
     color: white;
     background-color: green;
     border-radius: 20px;
     cursor: pointer;
}

.form {
     box-sizing: border-box;
     display: none;
     flex-direction: column;
  /*justify-content: space-between;*/
     position: absolute;
     top: 43px;
     left: 0;
     width: 250px;
     min-height: 130px;
     padding: 20px;
     border-radius: 8px;
     background-color: gainsboro;
}

input {
     margin-bottom: 20px;
     padding: 10px 15px;
     font-size: 16px;
     border: 1px solid violet;
     border-radius: 5px;
}

button {
     align-self: flex-end;
     max-width: 90px;
     padding: 10px 15px;
     color: white;
     font-size: 18px;
     background-color: blueviolet;
     border: none;
     border-radius: 30px;
     cursor: pointer;
}

.form-show {
     display: flex;
}

Последний раз редактировалось Alessio18911, 18.07.2017 в 01:06. Причина: Добавление ссылки на код в "песочнице"
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блокировка скролла всей страницы при наведении на элемент TimofeyEid jQuery 2 06.09.2015 15:30
Меню закрывается при наведении мыши (Срабатывает MouseOut родительского контейнера) BirviZ Events/DOM/Window 2 09.06.2015 00:29
Расшрение DIV при наведении мыши. OD_RS Элементы интерфейса 1 27.05.2013 21:49
Многократный запуск скрипта при наведении мыши AcidCrash Элементы интерфейса 7 08.07.2011 12:02
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06