很多时候在移动端的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. union以及一些扩展

    select name,age from Students where Age<3unionselect name ,age from Students where Age >4--两个结 ...

  2. 关于Oracle中查询结果为未选定行

    今天在做关于Oracle查询语句的练习时,碰到这么一个题目:找出EMP表中姓名(ENAME)第三个字母是A的员工姓名.我的Scott.emp表的现有数据如下: SQL> select * fro ...

  3. Category类别

    1.在已有类的基础上进行扩展,无需像继承一样子类化,就可以直接添加一些方法 2.继承不仅可以添加方法还可以添加属性,类别只能添加方法 3.类别不会改变现有类的方法,万一重写,自己写的优先级高 4.把类 ...

  4. 防止输入时键盘覆盖掉textfiled

    添加监听者 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardwasChange:) ...

  5. bootstrap输入框从数据库读取数据

    https://github.com/lzwme/bootstrap-suggest-plugin

  6. Zend Framework 框架搭建

    通过手工方法搭建Zend Framework的MVC框架结构.首先看一下zend framework mvc的目录结构 1. 在根目录下面创建 public ,并在 public 下创建 index. ...

  7. DTS结构及其编译方法

    一.主要问题1,需要了解dtsi与dts的关系2,dts的结构模型3,dts是如何被编译的,以及编译后会生成一个什么文件. 二.参考文字1,DTS(device tree source).dts文件是 ...

  8. css3的盒子模型布局

    写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webki ...

  9. SQL Server 错误18456

    第一步. 错误发生的场景 第二步. 找到引起错误的原因 第1步. 查看windows日志文件. 运行中输入 eventvwr (event viewer)打开日志文件查看器, 第三步. 解决方案,由第 ...

  10. CC++初学者编程教程(15) 基于cocos2dx的安卓打包环境

    1首先安装python 2 单击next 3 选择默认路径,单击next 4选择完全安装,单击next 5单击next开始安装 6 安装完成 7 设置环境变量 8 添加python的路径到path 9 ...