Focus search box when pressing slash

hugovk · hugovk · commit 23f0b4296f14 · 2023-08-29T21:43:14.000+03:00
diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html
@@ -48,7 +48,7 @@ <h3>{{ _('Navigation') }}</h3>
     {%- if builder != "htmlhelp" %}
     <div class="inline-search" role="search">
         <form class="inline-search" action="{{ pathto('search') }}" method="get">
-          <input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="search" name="q" />
+          <input placeholder="{{ _('Quick search') }}" aria-label="{{ _('Quick search') }}" type="search" name="q" id="search-box" />
           <input type="submit" value="{{ _('Go') }}" />
         </form>
     </div>
@@ -76,6 +76,7 @@ <h3>{{ _('Navigation') }}</h3>
         {%- if not embedded %}
             <script type="text/javascript" src="{{ pathto('_static/copybutton.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
+            <script type="text/javascript" src="{{ pathto('_static/search-focus.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/themetoggle.js', 1) }}"></script>
         {%- endif -%}
     {%- endif -%}
diff --git a/python_docs_theme/static/search-focus.js b/python_docs_theme/static/search-focus.js
@@ -0,0 +1,10 @@
+document.addEventListener('keydown', function(event) {
+  if (event.key === '/') {
+     // Prevent "/" from being entered in the search box
+    event.preventDefault();
+
+    // Set the focus on the search box
+    let searchBox = document.getElementById('search-box');
+    searchBox.focus();
+  }
+});
