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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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 新手入门教程
2009/08/03 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
自我鉴定模板
2013/10/29 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
中秋晚会活动方案
2014/08/31 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
学校安全管理制度
2015/08/06 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
python 对图片进行简单的处理
2021/06/23 Python