代码如下:

<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. C++——try、throw、catch实例学习程序

    #include<iostream> #include<stdexcept> //exception/stdexcept/new/type_info头文件里都有定义的标准异常类 ...

  2. Composer 基本指令操作使用

    Composer 基本指令操作使用 註: 若 composer.phar 改名為 composer, 請自行將 "php composer.phar" 替換成 "comp ...

  3. RAC 的一些概念性和原理性的知识(转)

    一 集群环境下的一些特殊问题 1.1 并发控制 在集群环境中, 关键数据通常是共享存放的,比如放在共享磁盘上. 而各个节点的对数据有相同的访问权限, 这时就必须有某种机制能够控制节点对数据的访问. O ...

  4. IOS 原生解析JSON 问题

    服务器----WebService 返回的是JSON数据 IOS解析报错: Error Domain=NSCocoaErrorDomain Code=3840 "Unable to conv ...

  5. LAMP架构搭建+Discuz论坛搭建【weber出品必属精品】

    一.     本机简介: 本机系统: CentOS-6.4-x86_64 主机名:oracle.ywb IP地址:192.168.146.129 二.     在Linux环境下安装Apache步骤 ...

  6. iOS9适配+warning消除

    最近做了iOS 9的适配,程序出现大量警告也做了些处理,写出来分先给大家. 一.iOS 9适配 问题一: <Error>: CGContextSaveGState: invalid con ...

  7. js中:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Json部分知识(前台显示格式、Json-lib日期处理)

    1,Json格式用于datagrid数据显示 easyui前台显示数据可以使用JSONObject,也可以使用JSONArray.但是如果需要在datagrid表格中进行数据显示,只能使用JSONOb ...

  9. 简单的LRU Cache设计与实现

    要求: 设计并实现一个LRU缓存的数据结构,支持get和set操作 get(key):若缓存中存在key,返回对应的value,否则返回-1 set(key,value):若缓存中存在key,替换其v ...

  10. QTableWidget简单操作

    使用Qt设计师工具,在窗体上添加Table Widget控件,这样就可以使用ui全局变量来调用该控件了. Table Widget控件的应用 (1)设置列数和行数 //设¦¨¨置?列¢D数ºy和¨ª行 ...