jquery html5 实现placeholder 兼容password ie6

最新推荐文章于 2025-08-09 20:51:19 发布

pengfeifei26

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/pengfeifei26/article/details/84471107

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在浏览器不支持placeholder属性时的处理方法，包括对普通输入框和密码框的特殊处理，确保用户输入体验的一致性和友好性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


//判断浏览器是否支持 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();  
                }  
            });  

        }