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中的选择符
Oct 17 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python yield使用方法示例
2013/12/04 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
什么是Remote Module
2016/06/10 面试题
教师业务学习制度
2014/01/25 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
北京英语导游词
2015/02/12 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
亲情作文之母爱
2019/09/25 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP