HTML5 placeholder属性详解


Posted in HTML / CSS onJune 22, 2016

HTML5里新引入很多有趣的新特征;有些体现在HTML里,有些是JavaScript API,全部非常的有用。其中我最喜欢的一个特征就是文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好!

HTML代码

<input type="text" name="first_name" placeholder="你的姓名..." />

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

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

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

JavaScript Code复制内容到剪贴板
  1. function hasPlaceholderSupport() {   
  2.  var input = document.createElement('input');   
  3.  return ('placeholder' in input);   
  4. }   
  5.   

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

JavaScript Code复制内容到剪贴板
  1. /* mootools ftw! */  
  2. var firstNameBox = $('first_name'),   
  3.  message = firstNameBox.get('placeholder');   
  4. firstNameBox.addEvents({   
  5.  focus: function() {   
  6.   if(firstNameBox.value == message) { searchBox.value = ''; }   
  7.  },   
  8.  blur: function() {   
  9.   if(firstNameBox.value == '') { searchBox.value = message; }   
  10.  }   
  11. });   
  12.   

用CSS美化placeholder

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

CSS代码

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

CSS Code复制内容到剪贴板
  1. /* all */  
  2. ::-webkit-input-placeholder { color:#f00; }   
  3. ::-moz-placeholder { color:#f00; } /* firefox 19+ */  
  4. :-ms-input-placeholder { color:#f00; } /* ie */  
  5. input:-moz-placeholder { color:#f00; }   
  6.   
  7. /* individual: webkit */  
  8. #field2::-webkit-input-placeholder { color:#00f; }   
  9. #field3::-webkit-input-placeholder { color:#090background:lightgreen; text-transform:uppercase; }   
  10. #field4::-webkit-input-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999; }   
  11.   
  12. /* individual: mozilla */  
  13. #field2::-moz-placeholder { color:#00f; }   
  14. #field3::-moz-placeholder { color:#090background:lightgreen; text-transform:uppercase; }   
  15. #field4::-moz-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999; }   
  16.   

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
HTML / CSS 相关文章推荐
css3 border-image使用说明
Jun 23 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 #HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 #HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 #HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 #HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 #HTML / CSS
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python中append实例用法总结
2019/07/30 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
酒店行政人事部经理职务说明书
2014/02/26 职场文书
公司员工活动策划方案
2014/08/20 职场文书
关键在于落实心得体会
2014/09/03 职场文书
社区节水倡议书
2015/04/29 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python