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
              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在不同浏览器下的表现及兼容方法的更多相关文章

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

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

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

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

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

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

  4. IE浏览器下常见的CSS兼容问题

    目录 [1]宽高bug [2]边框bug [3]盒模型bug[4]列表项bug [5]浮动bug [6]定位bug [7]表单bug 宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 & ...

  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. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

随机推荐

  1. C语言指针总结

    C语言中的精华是什么,答曰指针,这也是C语言中唯一的难点. C是对底层操作非常方便的语言,而底层操作中用到最多的就是指针,以后从事嵌入式开发的朋友们,指针将陪伴我们终身. 本文将从八个常见的方面来透视 ...

  2. 6.python模块(导入,内置,自定义,开源)

    一.模块 1.模块简介 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能.这也是使用python标准库的方法. 类似于函数式编程和面向过 ...

  3. Enum:Smallest Difference(POJ 2718)

    最小的差别 题目大意:输入一串数字,问你数字的组合方式,你可以随意用这些数字组合(无重复)来组合成一些整数(第一位不能为0),然后问你组合出来的整数的差最小是多少? 这一题可以用枚举的方法去做,这里我 ...

  4. discuz 学习

    一.Discuz首页“今日”“昨日”“欢迎新会员”等文字删除添加 搜索templeta/default/forum/discuz.htm   (使用非默认模版的请修改当前使用模版的discuz.htm ...

  5. iOS及时log日志查看工具 (iConsole)

    github下载地址:https://github.com/nicklockwood/iConsole 偶然看到的一个iOS及时log日志查看工具,通过该工具,我们可以在任何想看日志的时候,通过手势呼 ...

  6. ajax 中文乱码问题 主要是IE浏览器

    解决方案: 提交前采用encodeURI两次编码,注:一定是两次 举例: var taText = $("#txtName").val(); taText = encodeURI( ...

  7. MVC学习笔记---MVC的处理管线

    漫步ASP.NET MVC的处理管线   ASP.NET MVC从诞生到现在已经好几个年头了,这个框架提供一种全新的开发模式,更符合web开发本质.你可以很好的使用以及个性化和扩展这个框架,但这需要你 ...

  8. kindEditort图片自动上传

    参考:http://www.cnblogs.com/jaxu/p/3824583.html (赞一个)

  9. oracle 10g 学习之触发器(13)

    真实使用场景:数据备份 1. 触发器的 helloworld: 编写一个触发器, 在向 emp 表中插入记录时, 打印 'helloworld' create or replace trigger e ...

  10. hdu 1541/poj 2352:Stars(树状数组,经典题)

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...