Форум

Sufir · #1 (**permalink**) 28.11.2014, 18:05

Собственно сабж. Есть всплывающий саггест, который показывается по мере введения текста в поле поиска. А как бы правильнее реализовать его закрытие в случае клика вне его?

bes · #2 (**permalink**) 30.11.2014, 10:27

можешь повесить div во всё окно, по клику на него и скрывать

Сворачивание окна по клику в любом месте окна браузера...

krutoy · #3 (**permalink**) 30.11.2014, 10:58

события клика, наверное, использовать нежелательно, так как юзер может выйти из поля по табу. Может быть как-то так:

<html>
<head>
</head>
<body>

<input />
<div style="display: none">TEXT</div>

<script>

get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}

</script>
</body>
</html>

bes · #4 (**permalink**) 30.11.2014, 11:23

krutoy, доделай до рабочего

<body onbeforeunload="return 'are you sure you want to exit'">
<input />
<form>
<div style="display: none">
	<input type="submit"/>
	TEXT
</div>
</form>

<script>
get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}
</script>

<body onbeforeunload="return 'are you sure you want to exit'">
<input />
<form>
<div style="_display: none">
	<input type="submit"/>
	TEXT
</div>
</form>

<script>
get=document.querySelector.bind(document)
input=get("input")
div=get("div")
input.onfocus=function(){
   div.style.display="block"
}
input.onblur=function(){
   div.style.display="none"
}
</script>

krutoy · #5 (**permalink**) 30.11.2014, 12:21

bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.

bes · #6 (**permalink**) 30.11.2014, 12:26

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

bes,
Я не понял, зачем ты засунул это гавно внутрь скрывающегося дива. ТС'у не это нужно было.

я к тому, что его всплывающее предложение (suggestion) может содержать другие элементы, помимо текста, например, ссылки, и переход по ним не произойдёт при клике на них

bes · #7 (**permalink**) 30.11.2014, 15:30

krutoy, куда пропал?

можно сделать хотя бы так

<body>
<input/>
<div style="display: none">
	<a href="http://javascript.ru">link</a>
	TEXT
</div>
<script>
window.onbeforeunload = function () {
	return "onberforeunload";
};
(function () {
	var get = document.querySelector.bind(document);
	var input = get("input");
	var div = get("div");
	input.onfocus = function () {
		div.style.display = "block";
	}
	input.onblur = function () {
		setTimeout(function () {
			div.style.display = "none";
		}, 100);
	}
})();
</script>

К тебе отдельный вопрос: сможешь объяснить почему без точки с запятой после блока window.onbeforeunload возникает ошибка?

<body>
<input/>
<div style="display: none">
	<a href="http://javascript.ru">link</a>
	TEXT
</div>
<script>
window.onbeforeunload = function () {
	return "onberforeunload";
}
(function () {
	var get = document.querySelector.bind(document);
	var input = get("input");
	var div = get("div");
	input.onfocus = function () {
		div.style.display = "block";
	}
	input.onblur = function () {
		setTimeout(function () {
			div.style.display = "none";
		}, 100);
	}
})();
//Uncaught TypeError: string is not a function
</script>

krutoy · #8 (**permalink**) 30.11.2014, 15:38

bes,
Да, это боян, потому что парсер воспринимает следующую скобку как вызов функции. Ставь точку с запятой в подобных случаях.

f=function(){alert(1)}
f
()// 1

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.

bes · #9 (**permalink**) 30.11.2014, 15:53

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

bes,
Да, это боян, потому что парсер воспринимает следующую скобку как вызов функции. Ставь точку с запятой в подобных случаях.

f=function(){alert(1)}
f
()// 1

Подобное выражение допустимо. В этом случае пернос строки не эквивалентен точке с запятой.

ок, засчитано: +10 за то, что без мата

krutoy · #10 (**permalink**) 30.11.2014, 15:55

bes,
спасибо

Форум

Справочник

Discord чат

Курсы javascript