Hexo+Next搜索框自动定位获得焦点

Next默认的本地搜索,在点击一次搜索后会弹出一个页面。
这个时候还需要再点击一次搜索框,才能进行搜索,这样很不方便。
如下所示,只需要添加一小段代码
就可以实现自动捕获焦点,减少重复劳动

修改\themes\next\layout\_scripts\third-party\local_search.swig

自动捕获焦点的一点修改

需要在两个地方,添加一小段代码

1
2
3
4
5
6
7
8
9
10
11
12
}).get();
//添加这部分,加载xml后,再去取焦点
setTimeout( function(){
try{
var t = document.getElementById('local-search-input');
t.focus();
t.select();
} catch(e){}
}, 10);
//end
var $input = document.getElementById(search_id);
var $resultContent = document.getElementById(content_id);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// handle and trigger popup window;
// 在这下面找到
} else {
proceedsearch();
//添加下面这部分
setTimeout( function(){
try{
var t = document.getElementById('local-search-input');
t.focus();
t.select();
} catch(e){}
}, 10);
//end
};

然后就可以实现自动定位了。

添加自动捕获焦点功能

这段是历史代码,请使用上面的代码,效果更佳

1
2
3
4
5
6
7
8
9
10
11
// handle and trigger popup window;
$('.popup-trigger').click(function(e) {
e.stopPropagation();
//添加如下代码,
setTimeout( function(){
try{
var t = document.getElementById('local-search-input');
t.focus();
t.select();
} catch(e){}
}, 250);

上面这段代码有一点问题,就是当第一次加载网页的时候,那个时候local search的xml文件
还没有加载,这个时候代码是不能执行成功的。