代码如下：

<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. Direct3D 11的流水线

    流水线 流水线(Pipeline)是理解D3D必须要掌握的概念. 整个流水线有很多步骤,有的步骤是固定功能,不用怎么配置,有的步骤是要写代码的,也就是所谓的着色器程序(Shader). 一般来说,将流 ...

  2. Linux RAR 安装和使用详细说明

    描述:Linux默认自带ZIP压缩,最大支持4GB压缩,RAR的压缩比大于4GB.  流程:下载 >安装 > 使用  ----------------------------------- ...

  3. [RxJS] Refactoring Composable Streams in RxJS, switchMap()

    Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstr ...

  4. py爬取英文文档学习单词

    最近开始看一些整本整本的英文典籍,虽然能看个大概,但是作为四级都没过的我来说还是有些吃力,总还有一部分很关键的单词影响我对句子的理解,因为看的是纸质的,所以查询也很不方便,于是想来个突击,我想把程序单 ...

  5. VS2015 添加DNX SDK

    第一次运行VS2015,添加第一个ASP.NET 5程序时会报一个错误“DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装. 解决办法: 打开CMD :输入 @po ...

  6. 解析Function.prototype.bind

    简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. bind的作用 bind最直接的作用就是改变this的 ...

  7. SQL Server Profile：使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

  8. Windows命令行(DOS命令)教程–2 （转载） http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_1.html

    二.符号约定 为了便于说明格式,这里我们使用了一些符号约定,它们是通用的: C: 盘符 Path 路径 Filename 文件名 .ext 扩展名 Filespec 文件标识符 [ ] 方括号中的项目 ...

  9. xcode中折叠打开代码

  10. 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能

    最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...