解决网页搜索框无法使用手机输入法中的“搜索”按钮的问题

编辑：狂族晨曦 来源：WordPress技巧 日期：2017-07-05 阅读： 8,151 次 8 条评论 » 百度已收录

先森之前就发现，“成航先森”在手机上访问使用搜索时，无法使用键盘上的“前往/搜索”按钮。点击没有反应，必须要点击网页中的搜索按钮才行。之前因为懒得管，就一直没有解决这个问题，这两天丑了点时间研究了一下，最后发现这个问题是分阶段的。

“前往”和“搜索”按钮的问题

手机中的输入框，有时候右下角是“前往”，而有时候是“搜索”。先森起初以为是因为先森的搜索框显示的是“前往”，所以无法使用这个按钮。后来先森发现，写一个简单的html页面，通过手机访问，无论是“前往”还是“搜索”，都不会影响点击该按钮的效果。

不过让键盘显示“搜索”还是要显得专业一些。实现方法：

<input type="search">

搜索框的type必须是search。

“前往”与“搜索”

点击输入法中的“搜索”没有反应的原因

上面所说的，按键上无论显示什么文字，都不会影响功能。然而先森的网站中，点输入法上的按钮是死活没有作用，所以原因还是要继续找。

先森本以为是某个JS代码导致了这个问题，所以先森把首页保存到本地，一个个的删除尝试。花费了大概一个小时的时间，终于，先森确认跟JS代码没有任何关系。

最后无意间删了一个<base>标签，结果发现竟然可以了，手机输入法点击“搜索”可以搜索了。

罪魁祸首就是它：

<base target="_blank">

这个base标签的作用是网页中的每个链接都默认为新标签页打开，好不好用就不做累述了。

删除与恢复

删除这个<base>标签就可以实现使用手机输入法中的搜索按钮效果，但是我们想要的新标签页打开网页就没有了。

先森参考网上的JavaScript脚本，新写了一段js代码，从而实现相类似的效果。需要注意的是，不能简单的给每个<a>标签都增加上新标签页打开，因为有些地方不适合新标签页打开，比如页码，每点一次下一页就新开一个窗口，访客要疯了吧？

所以，当<a>标签已经设置了本页打开的需要排除，其他<a>标签才加上_blank属性。

把下面的JavaScript代码放在head某处：

<script type="text/javascript">
$(function(){
    $('body a').each(function(){
        if($(this).attr('target')!=='_self'){
        $(this).attr('target','_blank');}
    });
});
</script>

那么，你的网站搜索框能用手机的搜索按钮吗？

历史上的今天:

• 2016:  如何用3个月毁掉你的室友？——致即将步入大学的准大学生们(14)
• 2015:  2015毛概期末考试重点勾画部分整理(0)