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 ...
随机推荐
- JSF标签大全详解
1. JSF入门 藉由以下的几个主题,可以大致了解JSF的轮廓与特性,我们来看看网页设计人员与应用程序设计人员各负责什么. 1.1简介JSF Web应用程序的开发与传统的单机程序开发在本质上存在着太多 ...
- 关于C语言中的inline
在c中,为了解决一些频繁调用的小函数大量消耗栈空间或是叫栈内存的问题,特别的引入了inline修饰符,表示为内联函数.栈空间就是指放置程式的局部数据也就是函数内数据的内存空间,在系统下,栈空间是有限的 ...
- 监控工具zabbix
1 安装zabbixyum install -y epel-release安装rpm包的lamp环境 yum install httpd mysql mysql-libs php php-mysql ...
- Web项目去掉Js文件红叉
项目用到jquery,但将Jquery拷进去后,js文件有个红叉,看上去非常不爽.如下图: 解决方法: 1.找到项目下的.project文件 2.去掉Javascript验证 <?xml ver ...
- lightoj 1236 正整数唯一分解定理
A - (例题)整数分解 Crawling in process... Crawling failed Time Limit:2000MS Memory Limit:32768KB 6 ...
- ESP8266固件烧录方法
今天拿到ESP8266的板子,第一步是进行烧录固件. 首先是使用官方自带的参考文档,进行操作.发现每次烧录均卡在等待同步上电. 之后发现是烧录方法错误. 正确的烧录方法: 先按下FLASH不放,再按烧 ...
- No1_6.字符串的基本操作2_Java学习笔记
import java.util.Scanner; import java.util.regex.Pattern; public class HelloString2 { public static ...
- 使用ToolRunner运行Hadoop程序基本原理分析
为了简化命令行方式运行作业,Hadoop自带了一些辅助类.GenericOptionsParser是一个类,用来解释常用的Hadoop命令行选项,并根据需要,为Configuration对象设置相应的 ...
- 关于HTML的使用。
一丶标签问题 对于初学者来说,无疑用得最多的标签就是div和span了,当然就算只用这2个标签也能写出一个好看的页面,但是W3C为什么会给我们这么多标签来选择呢? 从浏览器的渲染来讲,标签的语义话,更 ...
- nignx开启expires后相关资源不显示的问题
expires可以指定浏览器缓存,加快浏览速度 但是开启expires必须先指定root server中原来指定 location / { root D:/WWW; index index.html ...