@@ -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 -%}
 
@@ -0,0 +1,21 @@
+function isInputFocused() {
+  const activeElement = document.activeElement;
+  return (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA' ||
+    activeElement.isContentEditable
+  );
+}
+
+document.addEventListener('keydown', function(event) {
+  if (event.key === '/') {
+    if (!isInputFocused()) {
+      // Prevent "/" from being entered in the search box
+      event.preventDefault();
+
+      // Set the focus on the search box
+      const searchBox = document.getElementById('search-box');
+      searchBox.focus();
+    }
+  }
+});