Add keyboard shortcut to focus search field (#31702)
* Documentation: Add slash key event to focus the input search. * Add little tag for keyboard shortcut in the search field * Use ctrl / as keyboard shortcut * Update search.js Co-authored-by: chuckrincon <chuckrincon@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk> Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
f989f8fb3a
commit
09a09387f4
|
@ -12,6 +12,13 @@
|
|||
var inputElement = document.getElementById('search-input')
|
||||
var siteDocsVersion = inputElement.getAttribute('data-docs-version')
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.ctrlKey && event.key === '/') {
|
||||
event.preventDefault()
|
||||
inputElement.focus()
|
||||
}
|
||||
})
|
||||
|
||||
function getOrigin() {
|
||||
var location = window.location
|
||||
var origin = location.origin
|
||||
|
|
|
@ -25,9 +25,36 @@
|
|||
}
|
||||
|
||||
.bd-search {
|
||||
.form-control:focus {
|
||||
border-color: $bd-purple-bright;
|
||||
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: .4rem;
|
||||
right: .4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.5rem;
|
||||
padding-right: .25rem;
|
||||
padding-left: .25rem;
|
||||
@include font-size(.75rem);
|
||||
color: $gray-600;
|
||||
content: "Ctrl + /";
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius(.125rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-right: 3.75rem;
|
||||
|
||||
&:focus {
|
||||
border-color: $bd-purple-bright;
|
||||
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue