`
pengfeifei26
  • 浏览: 245461 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jquery html5 实现placeholder 兼容password ie6

 
阅读更多
//判断浏览器是否支持 placeholder属性  
	function isPlaceholder(){  
   	 var input = document.createElement('input');  
    	return 'placeholder' in input;  
	}  
 //对不支持placeholder的浏览器处理
  	 if(!isPlaceholder()){  
            $("input").not("input[type='password']").each(//把input绑定事件 排除password框  
                function(){  
                    if($(this).val()=="" && $(this).attr("placeholder")!=""){  
                        $(this).val($(this).attr("placeholder"));  
                        $(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();  
            pwdField.hide();  
              
            pwdPlaceholder.focus(function(){  
                pwdPlaceholder.hide();  
                pwdField.show();  
                pwdField.focus();  
            });  
              
            pwdField.blur(function(){  
                if(pwdField.val() == '') {  
                    pwdPlaceholder.show();  
                    pwdField.hide();  
                }  
            });  
              
        }  
  
分享到:
评论

相关推荐

    IE下实现placeholder效果的jquery插件

    尤其是在JavaScript功能实现上,不同的浏览器对某些特性支持程度不一,比如在IE浏览器中,早期版本不支持HTML5中的`placeholder`属性。`placeholder`属性是HTML5引入的一个非常实用的功能,它允许我们在输入框中设置...

    IE7 浏览器处理 兼容 input placeholder.zip

    在前端开发中,IE7浏览器的兼容性问题一直是一个挑战,特别是对于HTML5新特性,如`input`元素的`placeholder`属性。`placeholder`属性允许我们在输入框中设置提示文字,当用户聚焦输入框时,提示文字会自动消失。...

    带提示的input输入框类似html5的 placeholder

    在这种情况下,可以借助JavaScript库或jQuery插件来实现兼容性处理。同时,`placeholder`仅提供静态提示,如果需要更复杂的交互,如动态提示或错误信息,可能需要使用其他方法。 总之,`placeholder`属性是HTML5中...

    jquery实现表单验证

    本篇文章将深入探讨如何利用jQuery在ASP.NET环境中实现表单验证,同时兼顾IE和Firefox等主流浏览器的兼容性。 首先,我们需要引入jQuery库。在HTML文档的`&lt;head&gt;`部分,通过`&lt;script&gt;`标签引入jQuery的核心库,如:...

    HTML 5 input placeholder 属性如何完美兼任ie

    为了实现跨浏览器兼容性,我们需要采用一些技巧来让 `placeholder` 在 IE 中也能正常工作。 在给定的代码中,使用了 jQuery 进行了兼容处理。首先,通过检测浏览器是否为 IE(通过 `$.browser.msie`),然后遍历...

    jQuery制作input提示内容(兼容IE8以上)

    本文详细介绍了如何使用jQuery来实现在不支持HTML5的input新属性placeholder的IE8及以下版本浏览器中,通过JavaScript脚本来为input元素提供提示内容的功能。这种做法尤其适用于密码输入框,因为HTML5的placeholder...

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

    总结来说,这个jQuery插件通过监听输入框的焦点和失焦事件,以及在页面加载时对输入框进行初始化,成功地在IE浏览器上实现了与HTML5`placeholder`属性相似的功能。它为那些不支持`placeholder`属性的浏览器提供了一...

    jquery实现动态登陆提示框(下拉提示效果)

    4. **兼容性考虑**:由于本解决方案依赖于CSS3的`transition`和`transform`属性,因此在不支持这些特性的浏览器(如旧版本的IE)中,可能无法实现预期的动画效果。可以使用CSS3检测库或条件注释来为这些浏览器提供回...

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    5. **良好的兼容性**:支持主流浏览器,包括Chrome、Firefox、Safari、Edge以及IE8+。 6. **易于扩展**:提供事件处理机制,方便开发者添加自定义功能。 **三、使用方法** 1. **引入资源**:首先在页面中引入...

    一款实用的jquery表单验证插件webluker.zip

    5. **兼容性**:基于jQuery构建,Webluker与大多数现代浏览器兼容,包括Chrome、Firefox、Safari、Edge和IE9+。 6. **可扩展性**:该插件设计时考虑了扩展性,可以与其他jQuery插件或前端框架(如Bootstrap)无缝...

    jquery验证插件Validator

    **jQuery验证插件Validator详解** ...结合`jQuery`的简洁API,可以快速实现高效、友好的表单验证机制,提高网站的用户体验和数据质量。通过学习和实践,你可以自如地运用这个插件解决实际项目中的验证问题。

    twitter bootstrap web 开发

    5. **兼容性广泛**:支持所有现代浏览器,包括 IE10+。 6. **文档详尽**:官方提供了非常全面且易懂的文档,便于初学者快速上手。 #### 三、Bootstrap 的安装与配置 1. **下载并引入 Bootstrap**: - 从官网下载...

    Bootstrap表单控件使用方法详解

    为了确保在旧版Internet Explorer中的兼容性,我们需要引入一些polyfill,如HTML5 Shiv,它允许老版本的IE识别HTML5的新标签。这部分代码通常放在`&lt;head&gt;`标签中: ```html &lt;!--[if lt IE 9]&gt; ...

Global site tag (gtag.js) - Google Analytics