很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索

虽然不是什么大的功能, 但是确实很实用,  实现的效果有一下两点

1. 点击input元素, 弹出的键盘右下角显示为 "搜索" 二字

2. 点击搜索时, 可以出发页面中的js事件

代码如下

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

     <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

 </head>

 <body>

     <form id="myform" action="" onsubmit="return false;">

     <input id="myinput" type="search">

     </form>

 </body>

 <script>

 //这两种都能用, 一个是在form上加id 一个是在input元素加id

 //对于苹果手机添加一个form元素是必要的,否则只能实现功能但是键盘的文字不能变成搜索字样

 //  $('#myform').bind('search', function () {

 //      //coding

 //      alert(1);

 //  });

     $('#myinput').bind('search', function () {

         //coding

         alert(1);

     });

 </script>

 </html>

开发移动端web应用, 使用手机自带键盘的搜索按钮的更多相关文章

  1. noVNC支持手机自带键盘输入

    代码修改说明 novnc的web链接类似为:http://192.168.1.177:6080/vnc_auto.html?token=105356fa-bbe3-43e4-a0ce-7703dc42 ...

  2. 开发移动端web的一些知识

    由于智能机的普及,越来越多网页支持移动端了,那么如何解决适配移动端呢 在这总结一下自己的学习笔记 viewport:虚拟的容器,仅在移动设备有效 <meta name="viewpor ...

  3. 开发移动端web页面click事件失效问题

    这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...

  4. H5禁止手机自带键盘弹出

    一个功能中用到这个, 调用软键盘,  不想弹出手机默认的输入法 网上找了个 http://blog.csdn.net/qq_24147051/article/details/52958610 处理方式 ...

  5. 点击input 禁止手机自带键盘弹出

    <input readonly  data-field="date" placeholder="請選擇結束時間"  class="start_t ...

  6. 移动端 input 获取焦点后弹出带enter(类似于搜索，确定，前往)键盘，以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  7. 移动端开发demo—移动端web相册（一）

    本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...

  8. 手机web站点和手机app 技术选型的困惑于思考

    今年一直在关注移动端技术的发展,自己也用博客园的rss接口玩了半年,关于技术选型的困惑和大家说说 一 趋势 随着手机硬件不断的升级,外加4g牌照的发放,不出2年时间移动端web站点和手机app一定会进 ...

  9. 一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

    https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技 ...

随机推荐

  1. java static关键字

    方便在没有创建对象的情况下来进行调用(方法/变量). 很显然,被static关键字修饰的方法或者变量不需要依赖于对象来进行访问,只要类被加载了,就可以通过类名去进行访问. static可以用来修饰类的 ...

  2. gcc常用命令集

    引用:http://developer.51cto.com/art/200609/32317_1.htm 对于GUN编译器来说,程序的编译要经历预处理.编译.汇编.连接四个阶段 假设源程序文件名为te ...

  3. xaml控件样式大全（太有用了）C#

    地址:链接:http://pan.baidu.com/s/1jGlMyEi 密码:zaeg http://blog.csdn.net/lhx527099095/article/category/943 ...

  4. C++ 开源库

    1.C++各大有名库的介绍——C++标准库 2.C++各大有名库的介绍——准标准库Boost 3.C++各大有名库的介绍——GUI 4.C++各大有名库的介绍——网络通信 5.C++各大有名库的介绍— ...

  5. Centos7安装JDK

    以下是gz包方式: 1,将jdk-8u51-linux-x64.tar.gz放到/usr/java目录下 2,用tar -zxvf jdk-8u51-linux-x64.tar.gz 解压到当前目录 ...

  6. 【iOS】objective-c 文档生成工具 appledoc

    最近做ios framework的一些测试,提供给其他开发者使用的framework,API文档变得更加重要,以前没有接触过,这次尝试使用了一把appledoc来生成一下文档,感觉还不错. 首先,是从 ...

  7. 对DTU系统结构的重新思考

        从决定做DTU开始无时无刻不在对这个新的产品系统进行思考,从最开始的ucos多任务结果到QPC基 于事件回调的软件结果,再到现在准备结合两者使用QPC+freeRTOS的系统结构.     原 ...

  8. tcpdump 抓包让wireshark来分析

    在linux下面用tcpdump 抓包非常方便, 但是抓的包要提取出来进行分析, 还是得用wireshark来过滤分析比较方便. 下面先介绍一下 TCPDUMP 的使用 例:tcpdump host ...

  9. 如何将Oracle安装为Linux服务

    方法一:使用oracle自带的启动和关闭脚本 1. oracle用户修改/etc/oratab 文件: $ vi /etc/oratab orcl:/oracle/app/product/10.2.0 ...

  10. LSH、ITQ、SKLSH图像检索实验实现(包含源码下载地址)

    原文来自我的独立blog:http://www.yuanyong.org/blog/cv/lsh-itq-sklsh-compliment 这两天寻找idea,想来思去也没想到好点的方法,于是把前段时 ...