文档章节

placeholder在不同浏览器下的表现及兼容方法

china008
 china008
发布于 2015/04/08 09:48
字数 743
阅读 85
收藏 2

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

1、什么是placeholder?

  placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。

  写法如下:

  

 


2、placeholder的浏览器兼容性和在不同浏览器下的表现

  由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。

  下面是其在各个浏览器下的显示效果:

   firefox:

   placeholder在不同浏览器下的表现及兼容方法


   chrome:

   placeholder在不同浏览器下的表现及兼容方法


   safari:

   placeholder在不同浏览器下的表现及兼容方法


   ie10:

   placeholder在不同浏览器下的表现及兼容方法

 

  可以看出,placeholder的文字在各个浏览器下基本都是淡灰色显示。

   不同的地方在于,在ff和chrome下,输入框获得焦点时,placeholder文字没有变化,只有当输入框中输入了内容时,placeholder文字才消失;而在safari和ie10下,当输入框获得焦点时,placeholder文字便立即消失。

   默认情况下,placeholder的文字是灰色,输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么,如何修改placeholder的色值呢?

   如果直接写input{color:red;},可以看到,ie10和ff下,placeholder文字和输入文字都变成了红色,如下:

   ff:

   placeholder在不同浏览器下的表现及兼容方法

   ie10:

    placeholder在不同浏览器下的表现及兼容方法

    而在chrome和safari下,placeholder文字颜色不变,只有输入的文字变成红色。

    显然,这种做法是行不通的。因为我们只想改变placeholder文字的颜色,并不想改变输入文字的颜色。

正确的写法如下:

  ::-moz-placeholder{color:red;}        //ff

  ::-webkit-input-placeholder{color:red;}   //chrome,safari

  :-ms-input-placeholder{color:red;}      //ie10

   

3、如何使placeholder兼容所有浏览器

   前面我们知道了,ie6到ie9并不支持原生的placeholder,并且即使在支持原生placeholder的浏览器上,其表现也并不一致。在实际项目中,如何使所有浏览器都一致地支持placeholder呢?

  (1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法:

  function placeholder(nodes,pcolor) {

   if(nodes.length && !("placeholder" in document_createElement_x("input"))){

     for(i=0;i

       var self = nodes[i],

         placeholder = self.getAttribute('placeholder') || '';    

       self.onfocus = function(){

         if(self.value == placeholder){

           self.value = '';

           self.style.color = "";

         }         

       }

       self.onblur = function(){

         if(self.value == ''){

           self.value = placeholder;

           self.style.color = pcolor;

         }        

       }                     

       self.value = placeholder;  

       self.style.color = pcolor;        

     }

   }

  }   

  (2)如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label。

   或者是在input上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。

   实现方法有很多种,欢迎大家各抒已见。  


本文转载自:http://blog.sina.com.cn/s/blog_4a0c5a940101j8bh.html

china008
粉丝 6
博文 286
码字总数 30406
作品 0
海淀
私信 提问
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在 chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样...

JackFace
2015/11/13
345
0
前端小纠结--自带“歧视性”的IE11 input事件

第一次碰到自带的歧视的bug,IE 11泥潭不解释。 起因 的在IE11下calendar panel无法正常展开,看图。 具体的相关讨论看参考链接中的部分。 因为我知道IE和firefox、chrome下时间处理有问题(...

前端小纠结
2019/07/03
0
0
IE8下对type=checkbox类型的input的placeholder属性的仿写

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。 如 <input type="text" id="userName" pla...

独特55
2015/09/25
641
0
html5 placeholder属性兼容ie11

placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint)。 简单例子: 这个标签属性主要用于提示,未填写之前是会显示的,鼠标触发的时候,是会隐藏的 注意:placeho...

smileNicky
2019/08/16
0
0
如何给input、textarea的placeholder属性设置字体颜色?

代码如下: input::-webkit-input-placeholder { color: #D6D0CA !important; / WebKit browsers / } input:-moz-placeholder { color: #D6D0CA !important; / Mozilla Firefox 4 to 18 / } ......

chic
2019/09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

dynamic-connectivity 动态连通性问题之 quick-union 算法

quick-union 的思想是:若对象 p 的 root_id 和对象 q 的 root_id 相等,则认为 p 和 q 连通。 若要将对象 p 和对象 q 连通(已知两对象未连通),则将 p 的 root_id 的值设为 q 的 root_id ...

Phpythoner_Alei
今天
33
0
OSChina 周六乱弹 —— 实在选不出来就唱国歌

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享阿冗的单曲《你的答案》。--祝大家在2020年都找到自己答案。 《你的答案》- 阿冗 手机党少年们想听歌,请使劲...

小小编辑
今天
10
0
Maven打包可执行Jar包的方法

在使用Java开发中,会使用到将工程打包成可执行的jar包的情况,那么在maven中怎么将项目中的依赖包都添加到jar中呢。在pom.xml中添加一下插件: <build><plugins><plugin><ar...

CapJes
今天
10
0
使用vue 开发地图类系统(openlayers.js)的注意。

使用vue 开发地图类系统的注意。 1、使用地图应该创建的对象 少使用 vue 的data 和计算属性(comments)存数据或是vuex。 为什么要要注意这个问题呢? 答:这个就要了解到vue的实现原理 。原理...

DY-Tao
昨天
7
0
web移动端学习:高德地图demo(一)

在高德地图开发中申请开发者资格,然后在控制台中新建应用,获得KEY; 新建模板HTML文件; <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>地图demo</title><scri......

dxiya
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部