Переключение div-а с помощю таб-а без js
Здравствуйте, если 2 раза нажат таб window1 скроется и будет отображатся window2? Почему ето приисходит и как ето исправить
<!DOCTYPE html>
<body>
<div class="body">
<div>
<button>Window1</button>
</div>
<div>
<button>Window2</button>
</div>
</div>
</body>
<style>
.body {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
overflow: hidden;
}
.body>div {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 100%;
}
</style>
</html>
|
fori,
в каком браузере? |
Что именно исправить?
Что должно получиться? По первому tab фокус передается на Window1, по второму на Window2 и он сдвигается в поле зрения. Но т.к у вас стоит overflow: hidden, то вы не видите , что Window1 не "пропал", а просто сдвинулся влево. |
Вложений: 1
Я упростил код до такого
<!DOCTYPE html>
<body>
<div class="frame">
<div class="body">
<div class="page0">
<button>111111111111111111111</button>
</div>
<div class=" page1">
<button>2222222222222222222222222</button>
</div>
</div>
</div>
<style>
.frame {
background: red;
}
.frame .body {
width: 100%;
position: relative;
overflow: hidden;
height: 5vmin;
}
.frame .body>div {
width: 100%;
position: absolute;
}
.page0 {
left: 0;
opacity:1;
}
.page1 {
left: 100%;
opacity:0;
}
</style>
</body>
</html>
Я хочу чтоб одно окно (на котором могут быть кнопки и тд) могло быть в стороне с нулевой видимостю, о одно отображалось. Вызывая событие я хочу иметь возможность програмно сдвигать окна и изменять прозрачность и ето работает, но нажатие табов ломает все |
Цитата:
|
Вы имеете ввиду поставить tabindex="-1" всем childNodes что в диве-окне?
Или есть другие испособы? |
Цитата:
|
fori,
document.addEventListener( "keydown" , function(event) {
let {target, code} = event;
if(target = target.closest(".body") && code == "Tab") event.preventDefault();
});
|
Спасибо, могу ли я каким-то образом узнать цель таб-а — тоесть если цель таба принадлежит компоненту - тогда e.preventDefault()
|
fori,
не понимаю. |
Тоесть, если таб пытается поставить фокус на елемент который пренадлежит div-у — e.preventDefault(), если таб пытается установить фокус на елемент который не принадлежит div-у — (пропустить событие и разрешыть поставить фокус на такой елемент)
Узнать принадлежит ли елемент родителю, таб на который надо блокировать можно по функции (аналог jquery-ного варианта parentHas)
parentsHas(el, target) {
let current = el;
while (
current.parentNode != null &&
current.parentNode != document.documentElement
) {
if (current == target) {
return true;
} else {
current = current.parentNode;
}
}
return false;
},
|
fori,
не могу подсказать, логика слишком заумная. |
fori,
попробую спросить по другому, чем предложенный код не устроил? |
Вложений: 1
В компонетне я поставил ваш код в mounted
mounted() {
document.addEventListener("keydown", function (event) {
let { target, code } = event;
if ((target = target.closest(".body") && code == "Tab"))
event.preventDefault();
});
},
При нажатии таб - таб попадает на инпут, дальнейшые нажатия игнорироются Но я хотел бы сделать так чтоб таб работал на отображающейся странице компонента (opacity:1) и не работал на не отображающейся (opacity:0) Если вам будет интересен результат - полный код компонента в вложении (i18n + vue 2 cli) |
fori,
пока без вариантов ... |
| Часовой пояс GMT +3, время: 07:02. |