这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助。
最近在做的项目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. CMake下,某些选项的后调整

    编译安卓NDK库时,发现在R15的NDK编译出来的库,总是带了-g选项,导致附带调试,文件过大. 搜索一番后,结论是NDK的文件中有问题: https://github.com/android/ndk ...

  2. 缓存融合(Cache Fusion)介绍

    概念 简单地说,缓存融合就是把Oracle RAC数据库中所有数据库缓存作为一个共享的数据库缓存,并被RAC中的所有节点共享.它是实现RAC的基本技术. 缓存融合主要有如下四个功能: (1) 提供扩展 ...

  3. json,异步加载,时间线

    JSON是一种传输数据的格式 JSON.stringify(obj);  obj--string JSON.parse(str);   string-->obj      

  4. 【电子电路技术】短波红外InGaAs探测器简析

    核心提示: 红外线是波长介于微波与可见光之间的电磁波,波长在0.75-1000μm之间,其在军事.通讯.探测.医疗等方面有广泛的应用.目前对红外线的分类还没有统一的标准,各个专业根据应用的需要,有着自 ...

  5. excel常用快捷键和技巧

    1. Ctrl+方向键,对单元格光标快速移动,移动到数据边缘(空格位置). 2. Ctrl+方向键,对单元格光标快速移动,移动到数据边缘(空格位置). 3. Ctrl+A,选择整张表. 4. Ctrl ...

  6. CentOS7之SVN服务配置

    操作系统:CentOS Linux release 7.2.1511 (Core)    Subversion软件版本:subversion-1.7.14-10.el7.x86_64 1.首先检查sv ...

  7. 小记---------Hadoop读、写文件步骤,HDFS架构理解

    Hadoop 是一个开源框架,可编写和运行分布式应用处理大规模数据 Hadoop框架的核心是HDFS 和 MapReduce HDFS是分布式文件系统(存储) MapReduce是分布式数据处理模型和 ...

  8. 【转】iptables命令、规则、参数详解

    表    (table)包含4个表:4个表的优先级由高到低:raw-->mangle-->nat-->filterraw---RAW表只使用在PREROUTING链和OUTPUT链上 ...

  9. 洛谷 P1134 阶乘问题 题解

    题面 很裸的边取模边乘.注意因为进位的原因模数应该比较大: 另外,这道题是一道标准的分块打表例题(那样的话数据就可以更大了),可以用来练习分块打表: #include<bits/stdc++.h ...

  10. 手把手教你用Python搭建自己的量化回测框架【均值回归策略】

    手把手教你用Python搭建自己的量化回测框架[均值回归策略] 引言 大部分量化策略都可以归类为均值回归与动量策略.事实上,只有当股票价格是均值回归或趋势的,交易策略才能盈利.否则,价格是随机游走的, ...