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 animation实现逐帧动画效果
Jun 02 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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脚本的10个技巧(5)
2006/10/09 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python求绝对值的三种方法小结
2019/12/04 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
全神贯注教学反思
2014/02/03 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
销售团队获奖感言
2014/08/14 职场文书
监察建议书
2015/02/04 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js