这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助。
最近在做的项目placeholder不兼容ie,这个可以兼容IE的输入框的HTML新增的placeholder的显示
下面是代码:
$( document ).ready( function()
{
//ie下placeholder的兼容
function isPlaceholder(){
var input = document.createElement('input');
return 'placeholder' in input;
} if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
$(document).ready(function() {
if(!isPlaceholder()){
$("input").not("input[type='password']").each(//把input绑定事件 排除password框
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this ).css("color","gray");
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdField = $("input[type=password]");
var pwdVal = pwdField.attr('placeholder');
pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#pwdPlaceholder');
pwdPlaceholder.show();
pwdPlaceholder.css("border","none");//样式改变
pwdPlaceholder.css("color","gray");
pwdField.hide(); pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
}); pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
}); }
}); }
});

ie下不支持placeholder 用jquery来完成兼容的更多相关文章

  1. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  2. 使ie8正常支持placeholder

    在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...

  3. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  4. 移动端日历选择控件(支持Zepto和JQuery)

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. 让IE8支持placeholder

    $(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function( ...

  6. max-height,min-height在IE下不支持的解决方法

    max-height,min-height在IE下不支持的解决方法 max-width:160px; max-height:160px; _width:expression(this.width &g ...

  7. 当浏览器不支持placeholder,所执行的函数

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  8. 简单实用的下拉菜单(CSS+jquery)

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  9. 让ie8支持 placeholder 属性

    一.  ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...

随机推荐

  1. linux:vi替换命令

    linux:vi替换命令 vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询 ...

  2. oracle系统视图V$

    --数据字典表select * from v$fixed_table;select * from v$fixed_view_definition;select * from dictionary; - ...

  3. Oracle 笔记(二)

    Oracle的sql语言: Sql全称:struct query language 结构化查询语言 五大类: DDL:数据定义语言  create  alter  drop DQL:数据查询语言sel ...

  4. 【嵌入式开发】树莓派h264实时视频监控

    FishXX之前用VLC串流输出视频,在电脑上需要VLC播放器.试了一下,感觉还是有点延时. 今天发现一个更加流畅,也不需要VLC播放器的树莓派远程视频监控方法,直接在浏览器中打开即可. 地址:htt ...

  5. 【VS开发】免费打工仔:一个完善的ActiveX Web控件教程

    作者 David Marcionek. 翻译 免费打工仔 这个教程可以帮助你快速开发一个ActiveX控件.其中将要讲解关于ActiveX开发的一些基础概念,诸如方法(method).属性(prope ...

  6. [Vuejs] 给ref赋值需要注意的问题

    1.简单赋值 <div ref="refCon"></div> 访问方式: this.$refs.refCon 2.循环赋值,相同名称 <div v- ...

  7. Akka系列(六):Actor解决了什么问题?

    前言..... 文档来源于  : What problems does the actor model solve? Actor解决了什么问题? Akka使用Actor模型来克服传统面向对象编程模型的 ...

  8. HDU 1029 Ignatius and the Princess IV (动态规划、思维)

    Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32767 K ( ...

  9. 性能库 Oracle数据库 连接不上问题的解决

    今天性能库的centos 上面的oracle18c 数据库连接不上了 这里进行了一次简单处理 针对不同问题进行说明: 1. 实例时 blocked 的状态 问题现象: LSNRCTL> stat ...

  10. Maven - Maven3实战学习笔记(2)坐标和依赖

    1.maven坐标元素 maven坐标元素包括:groupId.artifactId.version.packaging.classifier. classifier:定义输出的附属构件.groupI ...