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配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 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 mssql 时间格式问题
2009/01/13 PHP
PHP 面向对象实现代码
2009/11/11 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python正则表达式知识汇总
2017/09/22 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python文件操作的简单方法总结
2019/11/07 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
社区维稳工作方案
2014/06/06 职场文书
先进个人总结范文
2015/02/15 职场文书
企业党建工作总结2015
2015/05/26 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
Python中time标准库的使用教程
2022/04/13 Python