很多时候在移动端的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. javascript 算法

    前段时间学习算法方面的知识看了一下用C语言写的一些简单的算法自己用js模拟实现一遍现在整理出来和大家分享一下. 河内塔 斐波那契数列 巴斯卡三角形 三色棋 河内之塔(Towers of Hanoi)是 ...

  2. MysqlDataSource里的Connection实现类实现了isValid(int timeout)方法

    在项目中,需要连接mysql数据库的时候,我们最好选择使用数据库连接池,即需要选择DataSource. 而在使用c3p0的ComboPooledDataSource时,发现它的Connection实 ...

  3. 2015.4.10-C#入门基础(三)

    今天,我们聊一聊一些基本问题: 1.修饰符有哪些?有什么区别呢? 首先大家想到的应该是 public:特点是所属类的成员和非所属类的成员都可以访问 private:只有所属类的成员才可以访问 prot ...

  4. Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法

    本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...

  5. Velocity中避免null引起的数据问题

    请先看下面一段代码: #foreach($id in [1..50]) #set($user = $User.Get($id)) $id : ${user.name} #end 上面这段代码中,假设只 ...

  6. 移动网页版Meta 标签

    viewport 大部分移动浏览器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox 最基本的例子,在 ...

  7. 不同分辨率下获取不同js文件

    获取当前网站的目录  //js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址 function getRootPath(){ //整个域名(如:http://vc3.cn/ind ...

  8. c语言 列出-终止系统进程

    #include <stdio.h> #include "stdafx.h" #include <Windows.h> #include <strin ...

  9. Oracle EBS-SQL (PO-14):检查报价单与成本对比.sql

    select distinct         msi.segment1                                               项目        ,msi.de ...

  10. Linux 上的数据可视化工具

    Linux 上的数据可视化工具 5 种开放源码图形化工具简介 Linux® 上用来实现数据的图形可视化的应用程序有很多,从简单的 2-D 绘图到 3-D 制图,再到科学图形编程和图形模拟.幸运的是,这 ...