8
This एचटीएमएल फाइल एक 3 पैनल लेआउट दिखाता है। जब मैं पैनल बदलता हूं तो "बाएं" संपत्ति पर एक सीएसएस संक्रमण मुझे एक अच्छा स्लाइडिंग प्रभाव देता है। यह सब काम करता है, लेकिन जब मैं पैनल बदलता हूं, तो मैं नए पैनल में इनपुट पर ध्यान केंद्रित करना चाहता हूं। क्या कोई मुझे बता सकता है कि क्यों फोकस करने के लिए कॉल() सीएसएस संक्रमण को तोड़ता है, और मुझे दो पैनलों के बीच आधे रास्ते में ले जाता है? यह केवल आगे बढ़ रहा है। यह काम करता है अगर मैं संक्रमण को टिप्पणी करता हूं, और यह काम करता है अगर मैं टाइमआउट के साथ फोकस करने के लिए कॉल में देरी करता हूं।क्यों कॉलिंग फोकस() मेरे सीएसएस संक्रमण को तोड़ता है?
समस्या क्रोम, आईई और फ़ायरफ़ॉक्स में होती है।
<!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>
क्या आप हमारे लिए संपादित करने के लिए एक लाइव डेमो प्रदान कर सकते हैं? –
किसी भी कारण से, इसे jsfiddle के रूप में पुन: पेश करने का मेरा प्रयास काम नहीं करता था। आप स्थानीय रूप से कोड को सहेज सकते हैं, और इसे अपने फ़ाइल सिस्टम से ब्राउज़र में खोल सकते हैं। मेरे पास वेब का सामना करने वाला सर्वर आसान नहीं है। – bbsimonbb
यह कुल उत्तर नहीं है, लेकिन शायद उपयोगी ... ब्राउज़र में सक्रिय तत्व को देखने के लिए नियमों को स्क्रॉल करने के नियम हैं। इन नियमों में प्राथमिकता है जो आप स्क्रिप्ट के लिए जो भी व्यवहार कर सकते हैं। उपरोक्त उदाहरण में, टैबबिंग ने मुझे भी समस्याएं पैदा कीं। इस पल के लिए कामकाज हर समय ध्यान केंद्रित करना है। पृष्ठ पर कुछ हमेशा ध्यान केंद्रित किया जाना चाहिए, और फोकस करने के लिए कॉल() सेटटाइमआउट() के अंदर बनाए जाते हैं, इसलिए संक्रमणों को पूरा करने का मौका होता है। – bbsimonbb