成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

WordPress技巧

分段图

最新文章

WordPress技巧
当前位置: 首页 » 大学杂谈 » WordPress技巧 » 解决网页搜索框无法使用手机输入法中的“搜索”按钮的问题

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

编辑:狂族晨曦 来源:WordPress技巧 日期:2017-07-05 阅读: 1,292 次 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>

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

历史上的今天:

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共1077个字
转载请注明出处来自http://www.capjsj.cn/mobile_phone_search.html
已有 8 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
小萝博客的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 龙笑天的头像

    这个小技巧不错~ :wink:

    2017-07-06 09:38 回复
  2. 闲鱼的头像

    终于不是流量了,哈哈,这个马克

    2017-07-06 12:34 回复
  3. WordPress头条的头像

    不错的分享呢!

    2017-07-12 09:19 回复
  4. 振动分析仪的头像

    收藏了

    2017-07-17 11:36 回复
  5. 振动分析仪的头像

    不错的技巧哦,学习了呢!

    2017-07-18 13:36 回复
  6. 振动分析动平衡仪的头像

    收藏了。

    2017-07-25 15:43 回复
  7. 互联网笔记的头像

    这个小技巧不错,谢谢分享。

    2017-07-25 17:04 回复
  8. 小萝博客的头像

    该更新了

    2017-08-01 19:09 回复
官方微信
发表评论 返回顶部