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


Posted in Javascript onAugust 30, 2014

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

Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
jQuery事件用法实例汇总
Aug 29 #Javascript
You might like
php的控制语句
2006/10/09 PHP
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
Python如何发布程序的详细教程
2018/10/09 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
python requests证书问题解决
2019/09/05 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
高山背包:High Sierra
2017/11/23 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python