Focus on the searchbox when "/" key is pressed

按下"/"键后聚焦搜索框
This commit addresses and closes #371
本提交解决并关闭#371
This commit is contained in:
各務原 なでしこ 2023-07-27 00:01:45 -07:00
parent 704301229b
commit 40e2b65715
2 changed files with 11 additions and 1 deletions

View File

@ -35,7 +35,7 @@
<div class="row">
<h3 id="mirror-title">{% fa_svg fas.fa-cube %} 镜像列表 </h3>
{% unless page.legacy %}
<input type="search" v-model.trim="filter" id="search" placeholder="搜索" autocomplete="off">
<input type="search" v-model.trim="filter" id="search" ref="search" placeholder="搜索" autocomplete="off">
{% endunless %}
</div>
<table class="table" v-if="mirrorList.length">

View File

@ -30,6 +30,10 @@ var vmMirList = new Vue({
},
created () {
this.refreshMirrorList();
window.addEventListener("keypress", this.onKeyPress);
},
beforeDestroy() {
window.removeEventListener("keypress", this.onKeyPress);
},
updated () {
$('.mirror-item-label').popover();
@ -76,6 +80,12 @@ var vmMirList = new Vue({
self.rawMirrorList = status_data;
setTimeout(() => {self.refreshMirrorList()}, 10000);
});
},
onKeyPress(event) {
if (event.key === '/' && document.activeElement !== this.$refs.search) {
event.preventDefault();
this.$refs.search.focus();
}
}
}
})