1、什么是placeholder?

   placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。
   写法如下:
  
  
 
2、placeholder的浏览器兼容性和在不同浏览器下的表现
   由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
    下面是其在各个浏览器下的显示效果:
     firefox:
     
     chrome:
     
     safari:
     
     ie10:
     

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

     不同的地方在于,在ff和chrome下,输入框获得焦点时,placeholder文字没有变化,只有当输入框中输入了内容时,placeholder文字才消失;而在safari和ie10下,当输入框获得焦点时,placeholder文字便立即消失。
     默认情况下,placeholder的文字是灰色,输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么,如何修改placeholder的色值呢?
     如果直接写input{color:red;},可以看到,ie10和ff下,placeholder文字和输入文字都变成了红色,如下:
     ff:
     
      ie10:
      

而在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< nodes.length;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上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。
     实现方法有很多种,欢迎大家各抒已见。  

placeholder在不同浏览器下的表现及兼容方法 placeholder兼容的更多相关文章

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

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  2. placeholder在不同浏览器下的表现及兼容方法(转)

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  3. placeholder兼容方法(兼容IE8以上浏览器)

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  4. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  5. 关于js的parseInt方式在不同浏览器下的表现

    今天开发期间遇到个需求要把日期格式转换成毫秒数 日期为:2015-08-10 split之后使用parseInt将2015,08,10分别转化为数字格式. 但是使用parseInt('08')的时候却 ...

  6. IE6,IE7浏览器下 margin 无效的解决方法

    今天有时间,所以特意做了一个测试. 复制代码 代码如下: <style type="text/css"> .test-1,.test-2{border:5px soli ...

  7. outline轮廓线在不同CSS样式下的表现

    outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...

  8. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  9. window onerror 各浏览器下表现总结

    window onerror 各浏览器下表现总结 做前端错误上报,必然离不开window onerror,但window onerror在不同设备上表现并不一致,浏览器为避免信息泄露,在一些情况下并不 ...

随机推荐

  1. python笔记之常用模块用法分析

    python笔记之常用模块用法分析 内置模块(不用import就可以直接使用) 常用内置函数 help(obj) 在线帮助, obj可是任何类型 callable(obj) 查看一个obj是不是可以像 ...

  2. css选择表格偶数行

    css代码tr:nth-child(even){background:gray} 选择偶数行 tr:nth-child(even){background:gray} 选择奇数行  

  3. Loadrunner11 录制手机App脚本多种方法介绍

    总体来说,通过LR录制手机脚本的方式有三种:1)通过代理方式录制,保证手机电脑在同一个网段:2)通过抓包录制,在手机上安装Mobile Recorder:3)通过安卓模拟器录制,本地安装Android ...

  4. Java 学习 第五篇;面向对象

    1:基本数据类型的拆装: 基本变量类型 通过 new WrapperClass(primitive) 创建包装类对象: 包装类的对象 通过 WrapperInstance.XXXValue() 获取包 ...

  5. 狗屎的asp.net core 果然发生了重大的变更

    狗屎的asp.net core  果然发生了重大的变更 ....仔细看官方的文档,想骂娘....你发布版本的时候,能不能先想好先设计好再发布?朝三暮四...大撒笔....你老这样变来变去,谁还敢碰你啊 ...

  6. Fatal error: Allowed memory size of 8388608 bytes exhausted

    这两天安装bugfree,更换了一个数据量较大的库,结果打开bug详情页要么是空白页,要么就报如题的错误,错误信息还包括C:\wamp\www\bugfree\Include\Class\ADOLit ...

  7. Linux下(主要针对Ubuntu)下桌面分辨率的添加

    系统版本: Linux (Ubuntu) 其他桌面发行版应该也行. 相关命令: lspci, cvt, xrandr 在桌面分辨率不正常显示桌面或者没有最佳的分辨率时,需要修改添加适合的桌面分辨率模式 ...

  8. UESTC_Infected Land 2015 UESTC Training for Search Algorithm & String<Problem G>

    G - Infected Land Time Limit: 6000/3000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others ...

  9. UESTC_秋实大哥与花 2015 UESTC Training for Data Structures<Problem B>

    B - 秋实大哥与花 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  10. Word Search II 解答

    Question Given a 2D board and a list of words from the dictionary, find all words in the board. Each ...