Skip to content

Commit

Permalink
Prevent corrections and completions in search field
Browse files Browse the repository at this point in the history
In particular mobile browsers use correction mechanisms on input fields.
Search will often be done with technical terms or even class/method/etc
names that these correction mechanisms do not know, resulting in unwanted
changes. This PR deactivates these correction mechanisms.

While I haven't been able to find official reference documentation on
these input attributes, there are multiple sources, describing this, e.g.

References:

- Autocomplete: https://www.w3schools.com/howto/howto_html_autocomplete_off.asp
- Spellckeck: https://www.w3schools.com/howto/howto_html_spellcheck_disable.asp

I did not find official reference docs on autocorrect and autocapitalize, but
they are mentioned in various sources, e.g.

- https://mgearon.com/html/disable-autocomplete-autocapitalize-and-autocorrect/
- https://stackoverflow.com/questions/35513968/disable-auto-correct-in-safari-text-input
- https://davidwalsh.name/disable-autocorrect

and it works, as can easily be checked with a mobile device on the demos in the above
links.
  • Loading branch information
timhoffm committed Jun 7, 2021
1 parent b624526 commit 488df3f
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion sphinx/themes/basic/search.html
Expand Up @@ -37,7 +37,7 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
{% endblock %}
{% block searchbox %}
<form action="" method="get">
<input type="text" name="q" aria-labelledby="search-documentation" value="" />
<input type="text" name="q" aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="{{ _('search') }}" />
<span id="search-progress" style="padding-left: 10px"></span>
</form>
Expand Down
2 changes: 1 addition & 1 deletion sphinx/themes/basic/searchbox.html
Expand Up @@ -12,7 +12,7 @@
<h3 id="searchlabel">{{ _('Quick search') }}</h3>
<div class="searchformwrapper">
<form class="search" action="{{ pathto('search') }}" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" />
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="{{ _('Go') }}" />
</form>
</div>
Expand Down

0 comments on commit 488df3f

Please sign in to comment.