Цитата:
|
Сделал по другому.
Вернул весь код в прежнее состояние, удалил href="#"у ссылок в коде. Сейчас все работает отлично:) Всем большое спасибо за помощь |
Блин, опять косяк нашел. На панели есть форма входа. При фокусе на инпутах закрывается панель
|
Цитата:
|
Цитата:
|
как то так
UP подправил код
<!DOCTYPE HTML>
<html>
<head>
<style>
#block {
width:200px;
height:200px;
border:4px solid red;
}
body {
border:2px solid black;
}
</style>
</head>
<body tabindex='-1'>
<div tabindex='-1' id='block'>
wereasrwer
<input type='text'>
<div>
<input type='text'>
</div>
</div>
<div id='inform'></div>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
!function (){
var elem = _("#block"), focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.onfocusin = onDocumentFocus;
}
function onFocus(e) {
_("#inform").innerHTML = 'focus on '+ this.id;
focusForElem = true;
event.cancelBubble = true;
}
function onDocumentFocus () {
if (focusForElem) {
focusForElem = false;
onBlur();
}
}
function onBlur() {
_("#inform").innerHTML = 'focus on '+ this;
}
}();
</script>
</body>
</html>
Работает в ие 6+ без функции _() (должно ,не пробывал), в ие8+ точно работает П.с более гуманного решение не придумал, но может оно и есть так как код писал после того как проснулся=) |
а как насчет инпутов, которые находятся внутри панели. Можно ли сделать условие, если берет на себя фокус любой из инпутов панели, то закрытие панели по blur не происходит, а если теряет фокус один из инпутов панели, то панель приобретает фокус для нормального закрытия панели по blur? Пробовал через if() написать выполнение функции закрытия панели по blur, но не могу сформулировать условие 'если берет фокус тег input панели #toppanel, то...'. Пробовал через $('#toppanel').not('#toppanel input').blur() - тоже ничего не выходит. Либо панель не открывается либо панель закрывается при фокусе на любом из инпутов панели
|
Цитата:
если не нужна поддержка ИЕ меньше 9 , то кож можно сократить;) |
так в вышенаписанном коде панель не будет сворачиваться при фокусе на инпуте? Я правильно понял? Я просто нифига не понял в этом коде. Разбираюсь еще с js:-)
|
сделал просто интерфейс, думаю комментарии не нужны
<!DOCTYPE HTML>
<html>
<head>
<style>
#block {
width:200px;
height:200px;
border:4px solid red;
}
body {
border:2px solid black;
}
</style>
</head>
<body tabindex='-1'>
<div tabindex='-1' id='block'>
wereasrwer
<input type='text'>
<div>
<input type='text'>
</div>
</div>
<div id='inform'></div>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
focusForElem = false;
opt.blur.call(elem,e)
}
}
};
//пример вызова, в саму функцию лучше не лезть
Focus_and_Blur({
elem:document.getElementById('block'),
focus:function () {
_("#inform").innerHTML = 'focus on '+ this.id;
},
blur: function () {
_("#inform").innerHTML = 'blur '+ this.id;
}
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:13. |