Помогите новичку
Пожалуйста подскажите как правильно структурировать такой код:
if(document.getElementById('lastnamebox').mouseout)
{
lnbox.lnelement.style.display = 'none';
}
то есть выполнять lnbox.lnelement.style.display = 'none'; когда на document.getElementById('lastnamebox') при клике нет мышки? |
судя по имени lnbox.lnelement.style.display = 'none';-должен скрываться блок document.getElementById('lastnamebox')?если да ,то после этого он возможно никогда не появится.
а по всему остальному-зачем лезть на форум с вопросом ответ на какой есть в любом мануале ?в т.ч http://javascript.ru/tutorial/events да и по коду ясно что основы вы не знаете вообще. ошибок больше чем строк |
Цитата:
|
Что то я там не нашел чего мне надо.
Постараюсь описать ситуацию на пальцах без JS. Есть input, когда в него начинаешь прописывать символы под ним появляется <div> со списком, при нажатии на любую строку из списка она переноситься в input. Мне надо сделать так чтобы при onBlur в imput'е пропадал этот <div>, но не когда кликаешь по списку. |
Ну помогите кто нибудь, второй день сижу голову ломаю
|
Цитата:
|
Это точно (((
|
ну это не совсем та задача какая описывалась ранее.
1 следует впоймать событие onfocus инпута- это начало ввода в него 2 далее по таймеру проверять изменение value inputa -если введено чтото -сделать див видимым 3 событие выбора в селекте какой либо строки будет onchange и по нему нужно в инпут value переносить селект value (здесь возникнет событие onBlur инпута какое должно скрыть див. поэтому нужно проверять пред элемент откуда событие онфокус "пришло" в селект если с инпута то ничего не делать ) 4 при событии onBlur инпута скрыть див |
Цитата:
Почему бы событие onkeyup не заюзать? |
У меня там нет селекта, в <div> появляются ссылки, по нажатию их содержимое переноситься в input. При onBlur input'а <div> должен пропадать, но он не должен пропадать когда кликаешь по ссылки из <div>
|
Триви,
судя по всему он в конечном итоге подобное яндекс поиску и т.д собирается сделать-по этому сразу стоит завязку по полной делать. Цитата:
у тебя ведь последовательность-если событие клика происходит в любом элементе, кроме инпута или дива с его содержимым, то скрывать див поэтому тебе не блур нужно отслеживать а все клики кроме перечисленных. И обработчик у тебя будет клик на боди запретить всплытие если событие клика возникло не в инпуте или контейнере содержащем его и не в диве с сылками(проверка по id по классу) то скрыть див. как вариант - положить их в общий контейнер и если событие клика не в нём. то скрыть див с сылками |
Цитата:
|
Цитата:
Вот мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<script type="text/javascript" charset="windows-1251">
var lnbox = {
// Ссылка на DOM элемент поля ввода
lninput: null,
// Ссылка на DOM элемент всплывающего div'а
lnelement: null,
// Массив полученных фамилий
lastnames: new Array(),
// Объект XmlHttpRequest, для передачи данных (ajax)
httpreq: window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP"),
// Функция инициализации (выполняется по загрузке body)
init: function() {
// Устанавливаем ссылку на форму ввода
this.lnelement = document.getElementById('lastnamebox');
// Устанавливаем ссылку на вслывающий div
this.lninput = document.getElementById('lastnameinput');
// Устанавливаем обработчик событий нажатой (точнее отпущенной)
// клавиши на форму ввода
this.lninput.onkeyup = function(e) {
lnbox.process(e);
}
// Устанавливаем обработчик ответа сервера
this.httpreq.onreadystatechange = function() {
if (lnbox.httpreq.readyState == 4)
lnbox.updateBox(lnbox.httpreq.responseText);
}
},
// Функция запроса на сервер, параметр text - текст из поля ввода
requestUpdate: function(text) {
// Посылаем методом GET
this.httpreq.open("GET", 'http://mysite.ru/php_script/connectToMysql.php?text='+ text +'&rand='+ Math.random());
this.httpreq.send(null);
},
// Функция обновления div'а с фамилиями, вызывается при ответе
// с сервера, т.е обработчик ответа
updateBox: function(answer) {
// Полученный ответ парсим в js массив (подробнее читай JSON)
this.lastnames = eval(answer);
// Если пустой ответ - выходим из функции
if(this.lastnames.length <= 0) return false;
// Показываем div
this.lnelement.style.display = 'block';
// Отчищаем элемент от содержания
this.lnelement.innerHTML = "";
// Проходим циклом по массиву фамилий
for(var i = 0; i < this.lastnames.length; i++)
{
// Создаем элемент - тег <a>
var lnkdiv = document.createElement('div');
// Устанавливаем содержанием текущую фамилию
lnkdiv.innerHTML = this.lastnames[i];
// Ставим событие при щелчке на ссылку изменяется
// текст в форме ввода
lnkdiv.onclick = function() {
lnbox.lninput.value = this.innerHTML;
// Прячем div
lnbox.lnelement.innerHTML = '';
lnbox.lnelement.style.display = 'none';
}
// Присоединяем элемент к div'у с ссылками
this.lnelement.appendChild(lnkdiv);
}
},
// Функция обработки события нажания (точнее отпускания) клавиши
// на поле ввода
process: function(event) {
var key = window.event ? window.event.keyCode : (event.keyCode ? event.keyCode : (event.which ? event.which : null))
// Если введено меньше 2х символов не обрабатываем
if(this.lninput.value.length > 4)
this.requestUpdate(this.lninput.value);
}
}
</script>
</head>
<body>
<style>
#lastnamebox {
position: absolute;
display: none;
width: 180px;
margin-top: 2px;
padding:5px;
border: 1px solid #;
background: #F1F1F1;
}
#lastnamebox div
{
display: block;
padding: 5px 0 5px 15px;
color: #000000;
font-size: 12px;
}
#lastnamebox div:hover
{
background-color:#666666;
}
#lastnamebox a:hover {
text-decoration: none;
background: #FAFAFA;
color: #666666;
}
</style>
</head>
<body onLoad="lnbox.init()">
<input id="lastnameinput" on onblur="hide()" type="text" size="30" />
<div id="lastnamebox"></div>
</body>
</html>
|
shilinpavel,
посмотри моё последнее сообщение-там лучший вариант описан. а ссылку на статью по событиям и обработчикам я тебе дал вчера-выйдет у тебя строк 10 докучи по этому алгоритму и использовании методов Dom2 описанных в статье А вообще ,вижу что ты делаешь то что я предполагал-посмотри на форуме-ктото уже выкладывал реализацию подобного. и делай сразу через селект-ты ведь сожержимое в аякс ответе для него будешь получать-селект тебе страницу не порвёт |
Спасибо, но я все равно не очень понял что мне делать (((
|
сейчас
|
В смысле подождать?
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:38px;
top:14px;
width:315px;
height:74px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:43px;
top:100px;
width:239px;
height:42px;
z-index:2;
}
</style>
<script>
function scritie(znacenie)
{
document.getElementById("inp").value=znacenie.innerHTML;
document.getElementById("apDiv1").style.display="none";
// аякс запрос
}
function perehod()
{
// аякс запрос получение результатов
// вставка ответов в контейнер
// document.getElementById("apDiv1").innerHTML=ответ с сервера
document.getElementById("apDiv1").style.display="";
}
</script>
</head>
<body>
<div id="apDiv1"><a href="#" onclick="scritie(this)">нажми </a></div>
<div id="apDiv2"><input id="inp" type="text" onkeyup="perehod()"/></div>
<script>
document.getElementById("apDiv1").style.display="none";
</script>
</body>
это простое демо показывающее как должны события присходить onblur не нужен вообще . |
Но id="apDiv1" не пропадает когда кликаешь в пустоту.
|
Цитата:
<input id="inp" type="text" onkeyup="perehod()" onblur='document.getElementById("apDiv1").style.display="none"'/>
|
Цитата:
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
#apDiv1 {
position:absolute;
left:38px;
top:14px;
width:315px;
height:74px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:43px;
top:100px;
width:239px;
height:42px;
z-index:2;
}
</style>
<script>
function polushenie(event)
{
event = event || window.event;
var t = event.target || event.srcElement;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
if (t.id=="ssilka") document.getElementById("inp").value=t.innerHTML;
}
function perehod(event)
{
event = event || window.event;
var t = event.target || event.srcElement;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
if (t.id=="inp") document.getElementById("apDiv1").style.display="";
}
function skr()
{
document.getElementById("apDiv1").style.display="none";
}
</script>
</head>
<body onclick="skr()">
<div id="apDiv1"><a href="#" id="ssilka">нажми </a></div>
<div id="apDiv2"><input id="inp" type="text"/></div>
<script>
document.getElementById("apDiv1").style.display="none";
if ( document.attachEvent )
{
document.getElementById("apDiv1").attachEvent ( 'onclick',polushenie, false );
document.getElementById("inp").attachEvent ( 'onkeyup',perehod, false );
}
else
{
document.getElementById("apDiv1").addEventListener("click",polushenie, false);
document.getElementById("inp").addEventListener("keyup",perehod, false);
}
</script>
</body>
|
Решил проблему
document.onclick = function(event)
{
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
lnbox.lnelement.style.display = 'none';
}
Не знаю правильно не правильно, но за то работает ))) |
| Часовой пояс GMT +3, время: 10:40. |