placeholder插件兼容ie6.7.8,(支持密码框)

copy以下的代码,放在单独的js里面,引入有placeholder的页面,就ok啦

(function($) {  var placeholderfriend = {    focus: function(s) {      s = $(s).hide().prev().show().focus();      var idValue = s.attr("id");      if (idValue) {        s.attr("id", idValue.replace("placeholderfriend", ""));      }      var clsValue = s.attr("class");   if (clsValue) {        s.attr("class", clsValue.replace("placeholderfriend", ""));      }    }  }  //判断是否支持placeholder  function isPlaceholer() {    var input = document.createElement(‘input‘);    return "placeholder" in input;  }  //不支持的代码  if (!isPlaceholer()) {    $(function() {      var form = $(this);      //遍历所有文本框,添加placeholder模拟事件      var elements = form.find("input[type=‘text‘][placeholder]");      elements.each(function() {        var s = $(this);        var pValue = s.attr("placeholder");  var sValue = s.val();        if (pValue) {          if (sValue == ‘‘) {            s.val(pValue);          }        }      });      elements.focus(function() {        var s = $(this);        var pValue = s.attr("placeholder");  var sValue = s.val();        if (sValue && pValue) {          if (sValue == pValue) {            s.val(‘‘);          }        }      });      elements.blur(function() {        var s = $(this);        var pValue = s.attr("placeholder");  var sValue = s.val();        if (!sValue) {          s.val(pValue);        }      });      //遍历所有密码框,添加placeholder模拟事件      var elementsPass = form.find("input[type=‘password‘][placeholder]");      elementsPass.each(function(i) {        var s = $(this);        var pValue = s.attr("placeholder");  var sValue = s.val();        if (pValue) {          if (sValue == ‘‘) {            //DOM不支持type的修改,需要复制密码框属性,生成新的DOM            var html = this.outerHTML || "";            html = html.replace(/\s*type=([‘"])?password\1/gi, " type=text placeholderfriend")              .replace(/\s*(?:value|on[a-z]+|name)(=([‘"])?\S*\1)?/gi, " ")              .replace(/\s*placeholderfriend/, " placeholderfriend value=‘" + pValue              + "‘ " + "onfocus=‘placeholderfriendfocus(this);‘ ");            var idValue = s.attr("id");            if (idValue) {              s.attr("id", idValue + "placeholderfriend");            }            var clsValue = s.attr("class");   if (clsValue) {              s.attr("class", clsValue + "placeholderfriend");            }            s.hide();            s.after(html);          }        }      });      elementsPass.blur(function() {        var s = $(this);        var sValue = s.val();        if (sValue == ‘‘) {          var idValue = s.attr("id");          if (idValue) {            s.attr("id", idValue + "placeholderfriend");          }          var clsValue = s.attr("class");    if (clsValue) {            s.attr("class", clsValue + "placeholderfriend");          }          s.hide().next().show();        }      });    });  }  window.placeholderfriendfocus = placeholderfriend.focus;})(jQuery);
时间: 2024-07-29 03:58:58

placeholder插件兼容ie6.7.8,(支持密码框)的相关文章

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

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

最好用的placeholder插件,jQuery插件EnPlaceholder

EnPlaceholder插件支持密码框哦!实际对比同类的placeholder插件在ie等浏览器下效果做好! 插件效果预览:http://www.wufangbo.com/demo/jquery/30/index.html EnPlaceholder的使用方法 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="te

IE下支持文本框和密码框placeholder效果的JQuery插件

基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 实现代码如下: (function($) {  /**   * 没有开花的树   * 2012/11/28 15:12   */ var placeholderfriend = {    focus: function(s) {      s =

记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <!--[if (lt IE 8.0)]><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css

【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal

模态框这东西在很多前端框架里面也是存在的,但是很多前端框架,如Bootstrap,AmazeUI,Jquery对IE6的兼容性极其糟糕,因此如果自己手写一个纯粹javascript无任何插件的的模态框,不仅能够兼容IE6,对其它浏览器很有很大的兼容性,同时,也好改. 一.基本目标 比如如下的模态框,怎么用在纯粹html+css+javascript,在无任何前端插件的情况下实现呢? 可以看到效果图,是在IETester的IE6模式中进行的,没有任何问题. 我还在这个模态框里面镶嵌了一个表单.反正

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

jQuery TE——兼容IE6的轻量级文本编辑器插件

一.jQuery TE简介 官方页面 项目Demo 官方文档 jQuery TE是一款轻量级的jQuery的网页编辑器插件,压缩后只有19.5KB,兼容性非常好的所见即所得的文本编辑器.经过测试,兼容IE6. 而且,你可以自定义它的样式,写一些css,不仅仅是textarea,你可以将多种标签变成一个编辑器,比如span,或者p等. 兼容性:IE6+.chrome.Firefox.Opera.Safari.Yandex Browser等 二.如何使用 1.引入文件 这里方便使用,引入的为CDN地

实用的placeholder插件,兼容IE下的placeholder,jquery插件

placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 1 /* 2 * jQuery placeholder, fix for IE6,7,8,9 3 * @website itmyhome.com 4 */ 5 var JPlaceHolder = { 6 //检测 7 _check : function(){ 8 return 'placeholder' in document.createElement('input'); 9 }, 10 //初始化 11 i