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 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 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
mysql limit查询优化分析
2008/11/12 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
基于Django用户认证系统详解
2018/02/21 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python中os.remove()用法及注意事项
2021/01/31 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS