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文件里解决 , 以后再研究啦~!

赞 (0)

相关推荐

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

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

  • js兼容的placeholder属性详解

    js兼容的placeholder属性详解

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 placeholder 这个属性. html5 的新属性,就是在输入框没输入值的时候,显示的提示文字(自己的理解),例如: 貌似很好用,但也只能在支持 html 的浏览器版本中显示,而对于不能支持的浏览器版本,让我这种极力追求完美的开发者来说是很不舒服的一件事. 上网找了很多资料,有很多大牛人都已经有

  • 基于JS实现html中placeholder属性提示文字效果示例

    基于JS实现html中placeholder属性提示文字效果示例

    本文实例讲述了基于JS实现html中placeholder属性提示文字效果.分享给大家供大家参考,具体如下: 如何通过js实现html的placeholder属性效果呢 我们需要这样做: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script>

  • iOS应用开发中使UITextField实现placeholder属性的方法

    我们都知道iOS开发中的UITextField有个placeholder属性,placeholder可以很方便引导用户输入.但是UITextView却没有placeholder属性. 一.猥琐的方法 如何让UITextView也有placeholder功能呢?今天给各位分享一个比较猥琐的做法.思路大概是这样的: 把UITextView的text当placeholder使用. 在开始编辑的代理方法里清除placeholder. 在结束编辑的代理方法里在设置placeholder. 实现方法: 1.

  • 让低版本浏览器支持input的placeholder属性(js方法)

    复制代码 代码如下: var doc = window.document, input = doc.createElement('input'); if( typeof input['placeholder'] == 'undefined' ) // 如果不支持placeholder属性 { $('input').each(function( ele ) { var me = $(this); var ph = me.attr('placeholder'); if( ph && !me.v

  • hibernate属性级别注解实例代码

    属性级别注解 添加方式: 写在属性字段上面 写在属性的get访问器的上面 @Id 必须,定义了映射到数据库表的主键的属性,一个实体类可以有一个或者多个属性被映射为主键,可置于主键属性或者getXxx()前,注意:如果有多个属性定义为主键属性,该实体类必须实现serializable接口 @SequenceGenerator @GeneratedValue   @GeneratedValue(strategy=GenerationType,generator=""):可选,用于定义主键生

  • js 获取html5的data属性实现方法

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dataset</title> <meta charset="utf-8"> </head> <body> <div id='div' data-index='demo'> </div> </body> <

  • jquery 判断是否支持Placeholder属性的方法

    实例如下: //placeholder兼容性 function isPlaceholer(){ var input = document.createElement('input'); return "placeholder" in input; } 该函数的结果返回 true or false 以上这篇jquery 判断是否支持Placeholder属性的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js 根据对象数组中的属性进行排序实现代码

    这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 var arr = [ {name:'a',age:9}, {name:'b',age:12}, {name:'c',age:8} ]; arr.sort((a,b)=>{ return a.age - b.age }); function compare(property){ return function(a,b){ var

  • Android属性动画之ValueAnimator代码详解

    属性动画通过改变一个对象的属性值来进行动画,属性动画包含了以下几个特性: 1.持续时间(Duration) 主要用来定义动画的持续时间,默认值为300ms. 2.时间插值器(Time interpolation) 指定时间变化的百分比,就是当前流逝时间除以指定的持续时间,这个可以自定义,继承Interpolator,重写getInterpolation方法. 3.重复次数和行为(Repeat count and behavior) 指定动画的执行次数和动画的重复模式 4.动画集(Animator

随机推荐