33 lines
761 B
HTML
33 lines
761 B
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<style>
|
|
.container[data-mode="browsing"] .wrapper {
|
|
display:none;
|
|
}
|
|
|
|
.container[data-mode="searching"] .wrapper {
|
|
display:block;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.onload = async function() {
|
|
var wrapper = document.getElementsByClassName('wrapper')[0];
|
|
window.getComputedStyle(wrapper).display;
|
|
|
|
await new Promise(requestAnimationFrame);
|
|
|
|
var inputEl = document.getElementById('searchbox');
|
|
var container = document.getElementsByClassName('container')[0];
|
|
container.setAttribute('data-mode', 'searching');
|
|
inputEl.focus();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container" data-mode="browsing">
|
|
<div class="wrapper">
|
|
<input id="searchbox" placeholder="Should be focused">
|
|
</div>
|
|
</div>
|
|
</body>
|