8
This Plik html przedstawia układ 3-panelowy. Przejście css w "lewej" właściwości daje mi przyjemny efekt ślizgowy, kiedy zmieniam panele. Wszystko działa, ale kiedy zmieniam panele, chcę skupić się na danych wejściowych w nowym panelu. Czy ktoś może mi powiedzieć, dlaczego wywołanie focus() przełamuje przejście css i ląduje mi w połowie między dwoma panelami? To zdarza się tylko w przyszłości. Działa, jeśli skomentuję przejście, i zadziała, jeśli opóźnię wywołanie funkcji focus() z limitem czasu.Dlaczego wywoływanie fokusa() łamie moje przejście CSS?
Problem występuje w przeglądarce Chrome, IE i Firefox.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Sliding Bug</title>
<style>
#wrapper {
width: 100%;
height: auto;
overflow: hidden;
}
#panelContainer {
position: relative;
transition: left 1000ms ease;
}
.panel {
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="panelContainer">
<div id="panel0" class="panel" style="background-color: #888;">
panel zero
<input id="btn0" class="focussable" type="button" onclick="slide(1);" value="forward" />
</div>
<div id="panel1" class="panel" style="background-color: #AAA;">
panel 1
<input id="btn1" class="focussable" type="button" onclick="slide(2);" value="forward" />
<input type="button" onclick="slide(0);" value="back" />
</div>
<div id="panel2" class="panel" style="background-color: #CCC;">
panel 2
<input id="btn2" class="focussable" type="button" onclick="slide(1);" value="back" />
</div>
</div>
</div>
<script>
var panelContainer;
var panels = new Array();
var numPanels;
var currentPanel = 0;
window.addEventListener('load', init, false);
function init() {
setTimeout(function() { window.scrollTo(0, 1); }, 10); //hiding the browser address bar in iPhone/Android
panelContainer = document.getElementById("panelContainer");
panels = document.getElementsByClassName("panel");
numPanels = panels.length;
sizeResize();
}
function sizeResize() {
panelContainer.style.width = (numPanels * window.innerWidth) + "px";
panelContainer.style.height = window.innerHeight + "px";
for (var i = 0; i < numPanels; i++) {
panels[i].style.width = window.innerWidth + "px";
panels[i].style.height = window.innerHeight + "px";
}
slide();
}
window.onresize = sizeResize;
function slide(panel) {
if (panel != undefined)
currentPanel = panel;
panelContainer.style.left = -(window.innerWidth * currentPanel) + "px";
if (panel >= 0) {
panels[panel].getElementsByTagName("input")[0].focus();//shows problem
//window.setTimeout(function() { panels[panel].getElementsByTagName("input")[0].focus() }, 100);//no problem
}
}
</script>
</body>
</html>
Czy możesz udostępnić wersję demonstracyjną na żywo, abyśmy mogli ją edytować? –
Z jakiegoś powodu moja próba odtworzenia tego jako jsfiddle nie zadziałała. Możesz zapisać kod lokalnie i otworzyć go w przeglądarce z systemu plików. Nie mam serwera, który mógłby mi pomóc. – bbsimonbb
To nie jest całkowita odpowiedź, ale może przydatna ... Przeglądarki mają reguły przewijania aktywnego elementu do widoku. Reguły te mają pierwszeństwo przed jakimkolwiek zachowaniem, które możesz próbować napisać. W powyższym przykładzie problem powodował także tabbing. Obecnie rozwiązaniem jest zarządzanie skupieniem przez cały czas. Coś na stronie musi być zawsze skupione, a wywołania focus() są wprowadzane wewnątrz setTimeout(), więc przejścia mają szansę się zakończyć. – bbsimonbb