rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-06 23:57:36 +02:00
Code Issues Actions 11 Packages Releases Activity

Add keyboard shortcut to focus search field (#31702)

Browse Source 
* 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:
Mark Otto 2020-11-05 08:56:02 -08:00 committed by GitHub
parent f989f8fb3a
commit 09a09387f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
site/assets/js/search.js
View File

@ -12,6 +12,13 @@
var inputElement = document.getElementById('search-input') var inputElement = document.getElementById('search-input')
var siteDocsVersion = inputElement.getAttribute('data-docs-version') var siteDocsVersion = inputElement.getAttribute('data-docs-version')
document.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === '/') {
event.preventDefault()
inputElement.focus()
}
})
function getOrigin() { function getOrigin() {
var location = window.location var location = window.location
var origin = location.origin var origin = location.origin

33
site/assets/scss/_subnav.scss
View File

@ -25,9 +25,36 @@
} }
.bd-search { .bd-search {
.form-control:focus { position: relative;
border-color: $bd-purple-bright;
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); &::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);
}
} }
} }