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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
javascript动态加载二
Aug 22 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
js如何验证密码强度
Mar 18 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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 高效率写法 推荐
2010/02/21 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
基于Python os模块常用命令介绍
2017/11/03 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python简单实现插入排序实例代码
2020/12/16 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
几个常见的软件测试问题
2016/09/07 面试题
半年思想汇报
2013/12/30 职场文书
物业管理计划书
2014/01/10 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
森林防火标语
2014/06/23 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python