文档章节

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

china008
 china008
发布于 2015/04/08 09:48
字数 743
阅读 53
收藏 2
点赞 0
评论 0

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
粉丝 5
博文 182
码字总数 30406
作品 0
海淀
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

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

JackFace ⋅ 2015/11/13 ⋅ 0

IE8下对type=checkbox类型的input的placeholder属性的仿写

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

独特55 ⋅ 2015/09/25 ⋅ 0

给placeholder属性文字设置颜色 兼容性 伪类伪元素

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 css伪类:CSS 伪类用于向某些选择器添加特殊的效果。 css伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 伪元素由双冒号和伪元素名称...

书呆子拍皮球 ⋅ 2016/06/17 ⋅ 0

HTML5 的 PLACEHOLDER 属性

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本...

小编辑 ⋅ 2011/06/29 ⋅ 12

jQuery占位符插件--placeMe.js

在 HTML 5 中,占位符 placeholder 属性是很有用的,它能够起到提示左右,指引用户。但一些古老的浏览器不支持该属性,尤其是 IE,而 placeMe.js 就是针对这些古老的浏览器“兼容” placehol...

dowebok ⋅ 2013/03/28 ⋅ 0

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不...

^6^|^6^ ⋅ 2011/12/06 ⋅ 0

Web标准中兼容问题的解决学习笔记

一、 兼容问题产生的原因 各种浏览器是由不同的公司开发的 浏览器不断的更新换代 二、 兼容问题的解决 使用不会出现兼容问题的属性 使用CSS hack 条件注释 使用不会出现兼容问题的属性 使用C...

雪之丞 ⋅ 2013/02/20 ⋅ 0

input密码输入提示效果代码实例

本章节分享一段代码实例,它实现了input密码框输入提示效果。 也就是说在密码输入之前会有提示文本,比如"请输入密码"。 代码实例如下: placeholder属性可以参阅input placeholder一章节。 ...

青衫无名 ⋅ 03/01 ⋅ 0

怎样让div占据整个页面高度而没有滑条?文本框提示信息如何修改样式?

1、怎样让p占据整个页面高度而没有滑条? 给body设置属性overflow:hidden; 2、鼠标变小手? cursor:pointer; 3、文本框提示信息(placeholder)修改样式? 兼容主流浏览器 input::-webkit-input-p...

SmileRM的博客 ⋅ 2017/12/14 ⋅ 0

关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17 ⋅ 2017/11/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

服务网关过滤器

过滤器作用 我们的微服务应用提供的接口就可以通过统一的API网关入口被客户端访问到了。但是,每个客户端用户请求微服务应用提供的接口时,它们的访问权限往往都需要有一定的限制,系统并不会...

明理萝 ⋅ 1分钟前 ⋅ 1

【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项

lgsxp ⋅ 10分钟前 ⋅ 0

Day18 vim编辑模式、命令模式与练习

编辑模式 命令模式 :nohl 不高亮显示 :x与:wq类似,如果在更改文件之后操作,两者效果一样;如果打开文件,没有任何操作; :wq会更改mtime,但是:x不会。 练习题 扩展 vim的特殊用法 ht...

杉下 ⋅ 14分钟前 ⋅ 0

Enum、EnumMap、EnumSet

1、Enum 不带参数 public enum Car { AUDI { @Override public int getPrice() { return 25000; } }, MERCEDES { ......

职业搬砖20年 ⋅ 14分钟前 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 16分钟前 ⋅ 0

线程组和 ThreadLocal

前言 在上面文章中,我们从源码的角度上解析了一下线程池,并且从其 execute 方法开始把线程池中的相关执行流程过了一遍。那么接下来,我们来看一个新的关于线程的知识点:线程组。 线程组 ...

猴亮屏 ⋅ 17分钟前 ⋅ 0

相对路径和绝对路径

基本概念   文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。   物理路径:物理路...

临江仙卜算子 ⋅ 21分钟前 ⋅ 0

消息队列属性及常见消息队列介绍

什么是消息队列? 消息队列是在消息的传输过程中保存消息的容器,用于接收消息并以文件的方式存储,一个队列的消息可以同时被多个消息消费者消费。分布式消息服务DMS则是分布式的队列系统,消...

中间件小哥 ⋅ 23分钟前 ⋅ 0

java程序员使用web3j进行以太坊开发详解

如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤器...

笔阁 ⋅ 23分钟前 ⋅ 0

vim编辑模式、vim命令模式

vim编辑模式 使用vim filename 进入的界面是一般模式,在这个模式下虽然我们能够查看,复制,剪切,粘贴,但是不能编辑新的内容,如何能直接写入东西呢?这就需要进入编辑模式了,从一般模式...

李超小牛子 ⋅ 26分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部