很多时候在移动端的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. django学习笔记二:一个项目多个App项目搭建

    django充许在一个项目中存在多个app,如一个大门户网站中可以包含论坛,新闻等内容,其中每一个模块称之为一个App,也可以理解为一个个独立的小型项目最终集成在一个门户网站中最终呈现给用户 本次测试 ...

  2. dir_colors linux颜色配置

    在控制台下,用ls,就会发现,shell将不同类型的文件项目显示为不同的颜色.者可以提高效率,不用ls -l便能大概的把各个文件的类型情况了解一下. 你有没有想过更改这个着色配置呢? 其实,在/etc ...

  3. <转>java中静态方法和非静态方法的存储

    Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...

  4. H-Index,H-Index II

    1.H-Index Total Accepted: 19058 Total Submissions: 70245 Difficulty: Medium Given an array of citati ...

  5. Hibernate注解学习1

    由于项目的原因目前需要一些简单注解,于是就做了个hibernate注解的小demo,来记录一下. 1.需要引入jar包ejb3-persistence.jarhibernate-annotations ...

  6. JS编程最佳实践

    最近花了一周时间把<编写可维护的js> 阅读了一遍, 现将全书提到的JS编程最佳实践总结如下, 已追来者! 1.return 之后不可直接换行, 否则会导致ASI(自动分号插入机制)会在r ...

  7. 轻松搞定Ajax（分享下自己封装ajax函数，其实Ajax使用很简单，难是难在你得到数据后来怎样去使用这些数据）

    hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + X ...

  8. 自动化高效css开发，畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  9. SurfaceView的补充

    1.什么时候使用:当自定义View需要频繁刷新,或者刷新数据比较大的时候,建议使用SurfaceView取代使用View 2.继承SurfaceView的并重写的步骤:①.继承SurfaceView类 ...

  10. Performance of Transport Control Protocol over Dynamic Spectrum Access Links

    2007 IEEE 这篇论文主要就是分析了几个版本的TCP协议在DSA网络中的性能问题. 得出的结论是: 大部分现在在用的几个版本的TCP协议,都是能够较好地适应DSA环境,吞吐率都能达到95%.当然 ...