html: design for noscript

2 files changed, 8 insertions, 1 deletions

diff --git a/head.html b/head.html
index 77279c3..4af8e9c 100644
--- a/head.html
+++ b/head.html
@@ -9,7 +9,13 @@
 
 <div class=header>
 <div class=left><h1>Rust features</h1></div>
-<input id=search autofocus autocomplete=off tabindex=4>
+<input id=search autocomplete=off tabindex=4>
+<noscript>
+With JavaScript you get a search box here.
+<style>
+#search { display: none; }
+</style>
+</noscript>
 <script src=script.js></script>
 <div class=right></div>
 </div>
diff --git a/script.js b/script.js
index 365fb2e..bb6e445 100644
--- a/script.js
+++ b/script.js
@@ -3,6 +3,7 @@
 	const versions = await res.json();
 
 	const input = document.getElementById('search');
+	input.focus();
 	input.addEventListener('input', (e) => {
 		const query = e.target.value.toLowerCase();
 		for (const [key, data] of Object.entries(versions)) {