Форум

ruslan_mart · #11 (**permalink**) 22.01.2015, 08:36

skrudjmakdak, если меню будет исчезать плавно через transition, то увидим по идее. Или скрывать меню не сразу, по минимальному setTimeout`у.

Но я бы на твоём месте забыл про blur, сделал бы по клику и проверял бы, что если клик произошёл не по input, то меню скрываем, а если по input - открываем.

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      window.addEventListener('click', function(e) {
        var self = e.target;
        if(self.id == 'test' == menuIsHide) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      });
    </script>

  </body>
</html>

skrudjmakdak · #12 (**permalink**) 22.01.2015, 08:41

ну без таба у меня и так работает)))

ruslan_mart · #13 (**permalink**) 22.01.2015, 08:50

skrudjmakdak,

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      test.onblur = function() {
        menu.style.display = 'none';
        menuIsHide = true;
      };
      
      window.addEventListener('click', function(e) {
        var self = e.target;
        if(self.id == 'test' == menuIsHide) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      });
    </script>

  </body>
</html>

ruslan_mart · #14 (**permalink**) 22.01.2015, 08:53

Или так:

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px"></div>

    <script>
      var menuIsHide = true;
      
      window.onclick = test.onblur = function(e) {
        var self = e.target;
        if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      };
    </script>

  </body>
</html>

skrudjmakdak · #15 (**permalink**) 22.01.2015, 09:20

посм чуть попозже, ща занят

danik.js · #16 (**permalink**) 22.01.2015, 10:40

Сообщение от Ruslan_xDD

menuIsHide

Ну ты индеец )) menuIsHidden ("меню скрыто", а не "меню есть скрыть")

ruslan_mart · #17 (**permalink**) 22.01.2015, 10:46

danik.js, сам индеец.

Я в английском не силён, так что пофиг.

skrudjmakdak · #18 (**permalink**) 22.01.2015, 10:57

я задолблю)) не работает, выше писал почему

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
		<div>1</div>
		<div>2
			<div>2.1</div>
			<div>2.2</div>
			<div>2.3</div>
		</div>
		<div>3</div>
	</div>

    <script>
      var menuIsHide = true;
      
      window.onclick = test.onblur = function(e) {
        var self = e.target;
        if(e.type == 'blur' || (self.id == 'test' == menuIsHide)) {
          menu.style.display = menuIsHide ? 'block' : 'none';
          menuIsHide = !menuIsHide;
        }
      };
	  function c(e) {
		console.log(e.target);
	  }
    </script>

  </body>
</html>

очередь событий

ruslan_mart · #19 (**permalink**) 22.01.2015, 11:31

skrudjmakdak, если blur убрать, то работает.

Наверное проще просто запретить табуляцию по полю.

ruslan_mart · #20 (**permalink**) 22.01.2015, 11:46

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <input id="test" type="text">
    <div id="menu" style="border: 1px solid #555; display: none; height: 100px; width: 170px" onclick="c(event)">
		<div>1</div>
		<div>2
			<div>2.1</div>
			<div>2.2</div>
			<div>2.3</div>
		</div>
		<div>3</div>
	</div>

    <script>
      var menuIsHidden = true;
      
      window.onclick = window.onkeydown = function(e) {
        var self = e.target;
        if(self.id == 'test' == (menuIsHidden || e.type == 'keydown' && e.keyCode == 9)) {
          menu.style.display = menuIsHidden ? 'block' : 'none';
          menuIsHidden = !menuIsHidden;
        }
      };
      
      
	  function c(e) {
		console.log(e.target);
	  }
    </script>

  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript