让IE下支持Html5的placeholder属性的插件


Posted in HTML / CSS onSeptember 02, 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文件里解决 , 以后再研究啦~!
HTML / CSS 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 #HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 #HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 #HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 #HTML / CSS
html5 更新图片颜色示例代码
Jul 29 #HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 #HTML / CSS
You might like
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery 操作XML入门
2008/12/25 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Vue计算属性的使用
2017/08/04 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python实现稀疏矩阵示例代码
2017/06/09 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
Ruby如何进行文件操作
2014/07/17 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
教学质量评估实施方案
2014/03/17 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技