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和HTML5的支持状况
Oct 31 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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 数字左侧自动补0
2008/03/31 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
基本DOM节点操作
2017/01/17 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
python迭代dict的key和value的方法
2018/07/06 Python
python实现倒计时小工具
2019/07/29 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
优秀学生自我鉴定范例
2013/12/18 职场文书
校园之星获奖感言
2014/01/29 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
前端JavaScript大管家 package.json
2021/11/02 Javascript
JS实现简单的九宫格抽奖
2022/06/28 Javascript