Focus on the searchbox when "/" key is pressed

按下"/"键后聚焦搜索框
This commit addresses and closes tuna#371
本提交解决并关闭tuna#371

_layouts/index.html

@@ -35,7 +35,7 @@ <h3>暂时无法提供服务</h3>
 						<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">

static/js/index.es6

@@ -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();
+			}
 		}
 	}
 })