PC-HTML5-搜索框
代码如下:
<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-搜索框的更多相关文章
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- 三、jQuery--jQuery实践--搜索框制作
input标签讲解 <input/>作为按钮的type属性:button.submit(后面会有二者对比分析)
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- css3 jQuery实现3d搜索框+为空推断
<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...
- input搜索框实时检索功能实现(超简单,核心原理请看思路即可)
问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...
- jQuery搜索框输入实时进行查询
在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychan ...
随机推荐
- <Win32_6>程序员求爱的创意程序^_^
作为程序员,我们时常被外界误认为很闷.不浪漫.没创意……等等这一类人,这让我们实在有些感伤啊,我得为程序员呐喊一声: 我们也能可以欢快.浪漫.有创意…… 朋友,你向女生表白过吗? …… 这个问题有点儿 ...
- 外观模式之C++实现
说明:本文仅供学习交流,转载请标明出处.欢迎转载. 在我们学习程序设计时经常会用到模块化设计的思想,这一思想是我们首先把要实现的功能用一个模块表示,当用户想完毕某个人物时依次调用相应的函数. 然而.假 ...
- HDU 1027 Ignatius and the Princess II 选择序列题解
直接选择序列的方法解本题,可是最坏时间效率是O(n*n),故此不能达到0MS. 使用删除优化,那么就能够达到0MS了. 删除优化就是当须要删除数组中的元素为第一个元素的时候,那么就直接移动数组的头指针 ...
- std::remove_if
原型: #include <algorithm>forward_iterator remove_if( forward_iterator start, forward_iterator e ...
- Python进阶之路---1.2python版本差异
Python2.*与python3.*版本差异 作为一个初学者,我们应该如何选择python的版本进行学习呢,这两个版本有什么区别呢,接下来让我们简单了解一下,以便我们后续的学习. Python版本差 ...
- C#扩展方法的理解
“扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.” 这是msdn上说的,也就是你可以对String,Int,DataRow,DataTable等这些 ...
- repeater截取字数
<%# Eval("ArticleName").ToString().Length > 14 ? Eval("ArticleName").ToStr ...
- mysql查询分组归类函数-group_concat,通常与group_by一起使用
select a.`name`,group_concat(b.name SEPARATOR'.') as persons from `group` as a,`person` as b,`person ...
- Cocos2d-x 3.x部署到安卓
一.前期准备 下载下列软件: Python2.7 (https://www.python.org/downloads/) Cocos2d-x 3.x (http://www.cocos2d-x.org ...
- 管理员权限dropfiles和copydata小时失败问题
//处理低权限向高权限进程发消息的失败的问题 if(windows::version::instance()->IsVistaOrLater()) { typedef BOOL (WINAPI ...