代码如下:

<input type="text" placeholder="输入 回车搜索" autofocus x-webkit-speech>
很赞?Yes!

简短的几个代码就能实现原本多行JS才能实现的完美交互效果,这就是HTML5略窥一点的赞!

placeholder是为了设置初始值,并且这个初始值的颜色为灰色,当input的内容变动时,这个值就消失,它的职责就是给人一种亲和力的指示,十分有爱。

autofocus,顾名思义:自动聚焦,当进入当前页面时,这个input会自动获取焦点,而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的input聚焦。

x-webkit-speech,这个大概不必多解释了,webkit核的浏览器(如Chrome)特有的语音识别工具,给input装上也是再好不过的了,话说Google也给自己的搜索框装上这个工具。

PC-HTML5-搜索框的更多相关文章

  1. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  2. 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  3. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  4. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  5. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

  6. 三、jQuery--jQuery实践--搜索框制作

    input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)

  7. 自定义webkit搜索框样式

    好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...

  8. css3 jQuery实现3d搜索框+为空推断

    <!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...

  9. input搜索框实时检索功能实现(超简单,核心原理请看思路即可)

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  10. jQuery搜索框输入实时进行查询

    在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychan ...

随机推荐

  1. Hive MapJoin

    摘要 MapJoin是Hive的一种优化操作,其适用于小表JOIN大表的场景,由于表的JOIN操作是在Map端且在内存进行的,所以其并不需要启动Reduce任务也就不需要经过shuffle阶段,从而能 ...

  2. C++11 静态断言(static_assert)

      简介 C++0x中引入了static_assert这个关键字,用来做编译期间的断言,因此叫做静态断言. 其语法很简单:static_assert(常量表达式,提示字符串). 如果第一个参数常量表达 ...

  3. LINUX进程上锁查看方法

    jps -l 获取进程列表 jstack -l 8672  查看详细信息 查找启动任务的class 查看状态

  4. C#基础:集合

        C#中的数组实现为 System.Array 类的实例,它们只是集合类(Collection Classes)中的一种类型.集合类一般用于处理对象列表,其功能比简单数组要多,功能大多是通过实现 ...

  5. css画下图

    通常我看到这种效果,都是直接ps解决,但是不断重申性能的今天,显然不适应时代的需求啊! 今天看到群里有人问这种效果怎么做了,我在思考的时候,有人已经给出答案了: 我就测试了一下,发现确实可以实现,总结 ...

  6. DataTable复制自身行

    在我们工作的过程中有可能要使用DataTable产生一些重复数据(在不重复读取数据库的情况下) 无废话,直接上代码 DataTable复制自身一行(目的产生重复数据),已测试通过可直接复制 /// & ...

  7. IL(Intermediate Language)

    释义: IL是.NET框架中中间语言(Intermediate Language)的缩写.使用.NET框架提供的编译器可以直接将源程序编译为.exe或.dll文件,但此时编译出来的程序代码并不是CPU ...

  8. 《第一行代码》学习笔记5-活动Activity(3)

    1.Menu:让菜单得到展示的同时,不占用任何屏幕的空间. public boolean onCreateOptionsMenu(Menu menu){ getMenuInflater().infla ...

  9. IOS 代码管理工具

    代码管理工具国内主要用的是SVN 国外主要是Git

  10. IOS 创建App的最佳捷径

    简网App工场   ----------------创建App的最佳捷径