代码如下:

<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. 使用sublime text2怎样新建文件高速生成HTML头部信息?

    前提须要安装Emmet插件.安装完毕后重新启动sublime. 输入下面简写,按Tab. html:4t <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  2. hdu1015(Safecracker )

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kle ...

  3. UITableView的简单总结与回顾

    今天突发奇想的想对UItableView做一下汇总,感觉在编程中这个控件可以千变万化也是用的最多的一个了,下面就为大家简单总结下这个控件,也许还有不足,不过还是请各位不吝赐教了哈,那么我就开始了,我会 ...

  4. javaweb中去除某个get方式的参数,并且返回路径

    String requestURL = request.getRequestURL() + ""; // String queryString = request.getQuery ...

  5. Android 打造形形色色的进度条 实现可以如此简单

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重 ...

  6. (转)Javascript面向对象编程(二):构造函数的继承(作者:阮一峰)

    对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物& ...

  7. Java的优先级

    序列号 符号 名称 结合性(与操作数) 目数 说明 1 . 点 从左到右 双目 ( ) 圆括号 从左到右 [ ] 方括号 从左到右 2 + 正号 从右到左 单目 - 负号 从右到左 单目 ++ 自增 ...

  8. .net简单页面后台绑定下拉框,按钮,分页 后台cs文件

    二.cs文件 using System;using System.Collections.Generic;using System.Web.UI;using System.Web.UI.WebCont ...

  9. linux打开80端口及80端口占用解决办法

    linux打开80端口天客户那边有台服务器同一个局域网中都无法访问,排除lamp环境问题,发现时服务器中的防火墙没有开启80端口. 代码如下 复制代码vi /etc/sysconfig/iptable ...

  10. hdu 1282 回文数猜想

    Problem Description 一个正整数,如果从左向右读(称之为正序数)和从右向左读(称之为倒序数)是一样的,这样的数就叫回文数.任取一个正整数,如果不是回文数,将该数与他的倒序数相加,若其 ...