Html5的placeholder属性(IE兼容)

HTML5对Web Form做了很多增强,比方input新增的type类型、Form Validation等。

Placeholder是HTML5新增的还有一个属性,当input或者textarea设置了该属性后。该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。曾经要实现这效果都是用JavaScript来控制才干实现 , firefox、google chrome等表示对其支持 , 只有IE存在违和感啊!

比如:  <input id="t1" type="text" placeholder="请输入文字" />

介绍一个超强的让IE下支持placeholder的属性插件,同一时候也兼容其它不支持placeholder的浏览器,代码例如以下:

$(document).ready(function(){
   var doc=document,
    inputs=doc.getElementsByTagName(‘input‘),
    supportPlaceholder=‘placeholder‘in doc.createElement(‘input‘),

    placeholder=function(input){
     var text=input.getAttribute(‘placeholder‘),
     defaultValue=input.defaultValue;
     if(defaultValue==‘‘){
        input.value=text
     }
     input.onfocus=function(){
        if(input.value===text)
        {
            this.value=‘‘
        }
      };
     input.onblur=function(){
        if(input.value===‘‘){
            this.value=text
        }
      }
  };

  if(!supportPlaceholder){
     for(var i=0,len=inputs.length;i<len;i++){
          var input=inputs[i],
          text=input.getAttribute(‘placeholder‘);
          if(input.type===‘text‘&&text){
             placeholder(input)
          }
      }
  }
 });

直接把代码复制下来,保存成一个js文件引用就可以,不用再做不论什么处理,超级便利!

---------------------------------------------------------------------------------------------------------------------------

ex : 这样做的确能让IE的Input显示placeholder属性,可是假设页面上仅仅有一个input还好,假设是多个input,假设出现input没有填入不论什么值的话,那么它的空input会自己主动将placeholder的值填进value里面,从而错误发生.比如:

<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />

解决的方法就是在后台自己推断啦 , 或许能在上面的js文件中解决 , 以后再研究啦~!

欢迎交流 http://blog.csdn.net/ycwol/article/details/38925461

时间: 2024-10-26 02:05:00

Html5的placeholder属性(IE兼容)的相关文章

html5的placeholder属性(IE如何兼容placeholder属性)

界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 10:26:06|  分类: web学习 |  标签:html  js  ie  placeholder  |举报 |字号大中小 订阅 placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如inp

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

HTML5的placeholder 属性的向下兼容

HTML5的placeholder 属性的向下兼容 更多 0 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案,如图所示登录框: 系统登录 其实以前是通过给input|textarea设置value值来实现类似功能的,当input|textarea获得焦点时,将其value设置为空.但是有一个问题是对于密码输入框: <input

【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现: <input id="t1" 

让IE下支持Html5的placeholder属性

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文 字消失.以前要实现这效果都是用JavaScript来控制才能实现 , firefox.google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type

解决输入框placeholder属性不兼容IE9及以下浏览器问题

placeholder是HTML5的新属性,对于一些低版本的浏览器不兼容,所以要使用一些别的方法. 解决方法:引入jquery.placeholder.js文件,然后再加入以下代码 1 <!--[if lte IE 9]> 2 <script type="text/javascript" src="static/common/jquery/jquery.placeholder.js"></script> 3 <script&

HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari.IE) 适用范围:placeholder 属性适用于下面的

[干货]兼容HTML5的Placeholder属性-更新版v0.10102013

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失. 这里提供了Placeholder的兼容方法,更新如下: 1.将方法修改为node原生对象的继承对象2.兼容input类型为password的文本框3.提供样式名称作为参数,可以灵活设置样式,修正样式设置一处问题4.

ie兼容html5中placeholder属性

<!doctype html><html><head><meta charset="utf-8"><title>placeholder</title> <script id="jquery_183" type="text/javascript" class="library" src="C:/Users/Administrator/Desk