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实现3D旋转书本效果
Mar 21 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
用PHP实现递归循环每一个目录
2010/08/08 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
django中cookiecutter的使用教程
2020/12/03 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
房屋转让协议书范本
2014/04/11 职场文书
建筑学专业自荐书
2014/07/09 职场文书
班组拓展活动方案
2014/08/14 职场文书
出差报告格式模板
2014/11/06 职场文书
生产现场禁烟通知
2015/04/23 职场文书
食品药品安全责任书
2015/05/11 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python