如何设置h5表单在app或移动端键盘搜索按钮

 Html/Css   高蒙   阅读(979)   评论(1)   2018-06-07 09:43:43    键盘 h5 搜索 表单 


h5在app或移动端使用表单,可以吊起键盘进行直接搜索,不需要在h5里面单独写个按钮搜索。

默认情况,点击键盘的时候,会出现前往的样式并不是搜索的样式,这里我们需要对表单进行简单的设置即可。

当点击之后,我们可以监听键盘事件,进行相应的处理。


原表单:

<form action="" onsubmit="return false;">
    <input type="text" value="" placeholder="搜索你想要的" id="search">
</form>

修改后:

<form action="" onsubmit="return false;">
    <input type="search" value="" placeholder="搜索你想要的" id="search">
</form>

如图:

微信截图_20180607092822.png

javascript:

$('#search').keydown(function(event){
    if(event.keyCode==13){
    var keyword  = $('#search').val();
        alert(keyword);
    }
});

通过上面的简单设置即可实现h5表单在app或移动端键盘搜索按钮,并且可以点击搜索前往相应的操作。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客