HTML5里的placeholder属性使用实例和美化显示效果的方法


Posted in HTML / CSS onApril 23, 2014

placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好!

HTML代码

复制代码
代码如下:
<input type="text" name="first_name" placeholder="你的姓名..." />

你也看见了,需要做的只是在文本框的声明标签上加入placeholder属性。完全不需要JavaScript来创造这种效果。

检查浏览器是否支持Placeholder属性

因为placeholder是一种新属性,很有必要检查一下你的浏览器是否支持它,比如IE6、IE8肯定是不支持的:

复制代码
代码如下:

function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

如果用户的浏览器不支持placeholder特征,你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它:
复制代码
代码如下:

/* mootools ftw! */
var firstNameBox = $('first_name'),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value == message) { searchBox.value = ''; }
},
blur: function() {
if(firstNameBox.value == '') { searchBox.value = message; }
}
});

用CSS美化placeholder

在进一步研究时我发现了另外一个有趣的CSS功能:CSS美化INPUT placeholder效果。下面让我来用简单的CSS代码美化文本框里的placeholder文字。

CSS代码

火狐浏览器里的用法和谷歌浏览器里不太一样。它们的名称都很好理解:

复制代码
代码如下:

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

你可以控制placeholder文字的字体、颜色和风格。你甚至可以将文本框的placeholder以动画方式显示。 美化你的文本框都是些看起来很小的事情,但对于一些交互式的网站来说,成功的关键就在于细节。现在IE10里也只支持placeholder了,相信越来越多的人会使用这种原生的placeholder效果。

HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 #HTML / CSS
html5菜单折纸效果
Apr 22 #HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
You might like
php中并发读写文件冲突的解决方案
2013/10/25 PHP
使用php清除bom示例
2014/03/03 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
理解JavaScript中的事件
2006/09/23 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
50岁生日感言
2014/01/23 职场文书
迎八一活动主题
2014/01/31 职场文书
艺术节主持词
2014/04/02 职场文书
个人担保书范文
2014/05/20 职场文书
中考标语大全
2014/06/05 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年度考核工作总结
2014/12/24 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang