Html5的placeholder属性(IE兼容)实现代码

 更新时间:2014年08月30日 22:15:50   作者:Away  
Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独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文件里解决 , 以后再研究啦~!

相关文章

  • jQuery之网页换肤实现代码

    jQuery之网页换肤实现代码

    用jQuery做网页换肤确实是很一个很巧妙,很好的选择,这是本人在学习jQuery中学的知识,感觉很有用,写了下来,希望大家有更好的方法或者代码不足的地方请谅解,本人也是初学者啊,希望大家互相勉励互相学习。
    2011-04-04
  • jQuery鼠标事件汇总

    jQuery鼠标事件汇总

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
    2015-08-08
  • jquery实现控制表格行高亮实例

    jquery实现控制表格行高亮实例

    jquery实现控制表格行高亮实例,需要的朋友可以参考一下
    2013-06-06
  • jQuery中的ajax async同步和异步详解

    jQuery中的ajax async同步和异步详解

    async在jquery ajax中是一个同步参数。本篇文章给大家介绍jq中的ajax async同步和异步,小伙伴跟着小编一起学习吧
    2015-09-09
  • jQuery实现网站添加高亮突出显示效果的方法

    jQuery实现网站添加高亮突出显示效果的方法

    这篇文章主要介绍了jQuery实现网站添加高亮突出显示效果的方法,涉及jQuery针对页面元素与样式的操作技巧,需要的朋友可以参考下
    2015-06-06
  • 自制轻量级仿jQuery.boxy对话框插件代码

    自制轻量级仿jQuery.boxy对话框插件代码

    最近再做价值中国微博,从用户体验的角度,将很多常用的window.alert或者window.confirm之类比较生硬死板冷不丁的提示改为弹出层的方式实现。
    2010-10-10
  • 浅谈jquery上下滑动的注意事项

    浅谈jquery上下滑动的注意事项

    下面小编就为大家带来一篇jquery上下滑动的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery实现轮播图效果

    jquery实现轮播图效果

    本文介绍了jquery实现轮播图效果示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JQUERY复选框CHECKBOX全选,取消全选

    JQUERY复选框CHECKBOX全选,取消全选

    用JQUERY实现全选和取消全选,减少了我们写JS的麻烦,我们再也不用写那么多代码了,给大家分享两段代码,用JQUERY实现复选框的全选和取消全选.
    2008-08-08
  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    jquery 操作DOM案例,实现图片的显示,需要的朋友可以参考下
    2012-04-04

最新评论