ie下不支持placeholder 用jquery来完成兼容

这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助。最近在做的项目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();               }            });

         }      });

   }});
时间: 2024-10-06 07:34:39

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

基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转)

效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplaceholder/打包下载:http://xiazai.jb51.net/201105/yuanma/jqueryplaceholder.rar 基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转),布布扣,bubuko.com

jQuery placeholder插件 让IE也能够支持placeholder属性

jQuery placeholder插件 让IE也能够支持placeholder属性 案例:整搜索框,需要默认占位符为“请输入关键词”,获取焦点时,占位符消失或不可用(不影响正常输入),丢失焦点后,若用户无内容输入,占位符继续出现,继续占位.这种代码我想前端们已经很容易就写出来了吧,现在HTML5原生就有这个“placeholder”属性,效果与上边案例描述的一样(各支持的浏览器内部表现可能不一致,但是作用是一致的),那么这一属性该怎么优雅降级到支持所有现代浏览器呢?答案还是脚本即JavaScr

Eclipse 支持 HTML&amp;JSExtJS&amp;jQuery 代码智能提示

Eclipse支持HTML&JSExtJS&jQuery代码智能提示 安装HTML插件GEF和EclipseHTMLEditor 一. GEF下载安装 进到网页http://www.eclipse.org/gef/downloads/ 点6.2M的那个.会进入下载页面http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201201171043/GEF-ALL-3.7.2.z

IE10 以下版本完美支持 placeholder 特性

直接上代码,需要引入 Jquery $(function () { //浏览器不支持 placeholder 时才执行 if (!('placeholder' in document.createElement('input'))) { $('[placeholder]').each(function () { var $tag = $(this); //当前 input var $copy = $tag.clone(); //当前 input 的复制 $copy.css("color"

让IE支持placeholder属性,跨浏览器placehoder

在html5中,文本框,也就是input, type为text,或者password,新增了一个属性placeholder,也就是占位符,以下是firefox浏览器下的表现形式,当输入的时候,占位符就会消失.这个属性非常好用,因为有这个必要html5才会因素这个属性,然而在IE下,就没有这效果,以下是IE9的表现. 下面是JS版: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

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

placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doctype html> <html> <header> <meta charset="utf-8"> <title>placeholder</title> <style type="text/css"

让IE低版本浏览器也支持placeholder属性

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>让IE低版本浏览器也支持placeholder属性</title>    

让ie支持placeholder

在项目中,input 和 textarea标签要用到提示,当初是用value来模拟的,虽然可以达到这个效果,但是每一个还绑定了onblur和onfocus事件,这样一来 提交数据的时候验证就是个麻烦事了,input text还好一些,失去焦点是就可以用defaultvalue来搞,textarea就麻烦了,没有defaultvalue这个属性. 没有defaultvalue都是小事,我们项目用到了jquery.validationEngine验证框架,如果用框架来验证的话,那么就不能用value

邮箱登陆界面占位符(placeholder)jQuery法

大家都知道邮箱登陆的时候默认状态下会有文字提醒,当鼠标聚焦到邮箱文本框时,内容文字被会被清空. html5下有占位符(placeholder)属性,但是兼容不是特别好~下面是jQuery的方法 css代码: <input type="text" id="address" value="请输入邮箱地址" /><input type="text" id="password" value=&qu