`

placeholder的兼容处理(jQuery下)

 
阅读更多
/*
.placeholder{    
    color: #aaa!important;
}
span.placeholder{
    position: absolute;
    left: 0;
    line-height: 34px;
    padding-left: 12px;
}
*/
var browserSupport = {
    placeholder: 'placeholder' in document.createElement('input')
}

/* ajax请求发现未登录时,服务端返回401错误,然后此处统一处理401错误,跳转到登录页面 */
$(document).ready(function() {
    //模拟placeholder
    if( !browserSupport.placeholder){
        $('input[placeholder],textarea[placeholder]').each(function(){
            var that = $(this),
                text= that.attr('placeholder'),
                oldType; 
            if(that.val()===""){
                if(that.attr('type') != 'password'){
                    that.val(text).addClass('placeholder');  
                }else{
                    that.before('<span class="placeholder">请输入密码</span>');
                }
            }   
            that.focus(function(){
                //ie8下readonly依然可以上焦点的处理
                if(that.attr('readonly')){
                    that.blur();
                    return;
                }
                //清除span.placeholder
                that.prev("span.placeholder").remove();
                that.removeClass('placeholder');
                
                if(that.val()===text){   
                    that.val("");   
                }   
            }).blur(function(){
                if(that.val()===""){
                    if(that.attr('type') != 'password'){   
                        that.val(text).addClass('placeholder');
                    }else{
                        that.before('<span class="placeholder">请输入密码</span>');
                    }
                //防止异常情况:当有placeholder类,且值不为空(代码设置值时容易出现)
                }else{
                    that.removeClass('placeholder');
                }   
            }).closest('form').submit(function(){   
                if(that.val() === text){   
                    that.val('');   
                }   
            });   
        });
        $(document).on('click','span.placeholder',function(){
            $(this).next("[placeholder]").focus();
            //删除span.placeholder会在[placeholder]的focus中进行
        })
    }
})


参考:http://www.cnblogs.com/chuaWeb/p/5062671.html
分享到:
评论

相关推荐

    IE下实现placeholder效果的jquery插件

    本篇将详细介绍如何使用一个名为"placeholderfriend.js"的jQuery插件,在IE浏览器下实现`placeholder`效果。 首先,我们来看`placeholderfriend.js`插件的基本原理。这个插件的工作机制是通过监听页面加载和输入框...

    placeholder效果的jQuery插件,支持IE6、IE7

    4. **兼容性处理**:插件如何检测浏览器是否支持原生的placeholder,以及在不支持的情况下如何模拟这个功能。 5. **自定义设置**:可能提供一些可配置的选项,让用户可以根据自己的需求调整提示文本的样式、行为等...

    jquery 代码解决placeholder不换行,不居中问题

    ### jQuery 解决 Placeholder 不换行、不居中问题详解 #### 一、问题背景与概述 在网页开发中,为了提升用户体验,我们经常会在输入框中使用 `placeholder` 属性来提示用户应该输入什么类型的信息。然而,在某些...

    jquery placeholder

    然而,一些较旧或非主流的浏览器并不支持这个特性,这就需要像`jQuery Placeholder`这样的插件来提供兼容性。 `jQuery Placeholder`的工作原理是通过JavaScript模拟`placeholder`的效果。它会在页面加载完成后查找...

    jQuery placeholder实现源码(兼容所有浏览器)

    `jQuery`作为一个广泛使用的JavaScript库,可以用来为这些不支持`placeholder`属性的浏览器提供兼容性解决方案。本文将深入解析一个使用jQuery实现`placeholder`功能的源码,并探讨其工作原理。 首先,让我们理解`...

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

    标题中的"IE7浏览器处理兼容input placeholder"是指如何在不支持`placeholder`属性的IE7浏览器中模拟这一功能。这个问题的解决方案通常依赖于JavaScript库,例如在给定的压缩包中包含的`jquery.placeholder.min.js`...

    jquery.placeholder.js

    总结来说,`jquery.placeholder.js`是一个小巧而实用的jQuery插件,它解决了IE浏览器对`placeholder`属性的兼容性问题,使得无论在哪个浏览器环境下,用户都能享受到一致的用户体验。通过简单的引入和调用,以及可选...

    IE兼容placeholder js

    标签“js placeholder IE兼容”进一步确认了我们讨论的主题,即使用JavaScript来处理`placeholder`属性的IE兼容性问题。JavaScript可以用来检测浏览器类型和版本,然后在不支持`placeholder`属性的IE浏览器中动态...

    input中placeholder在Ie上兼容

    为了解决这个问题,我们可以利用jQuery库来实现对IE的兼容性支持。jQuery是一款强大的JavaScript库,它提供了一套简洁的API,能够简化DOM操作、事件处理以及Ajax交互等任务。对于`placeholder`属性的支持,我们可以...

    15种表单占位符placeholder动画jquery插件

    在IT行业中,jQuery库是网页开发中不可或缺的一部分,它极大地简化了JavaScript的使用,使得DOM操作、事件处理、动画效果以及Ajax交互变得更加便捷。而"15种表单占位符placeholder动画jquery插件"正是基于jQuery的一...

    jquery-placeholder

    低版本的浏览器不支持html5的placeholder属性,想要兼容该问题,需要利用js来处理。

    jQuery实现的一个自定义Placeholder属性插件

    同时,它还展示了如何通过工具方法的使用、事件处理、以及渐进增强的思路来开发一个兼容性良好的插件。通过这篇文章,开发者可以学习到如何为现代网页添加兼容性补丁,确保各种浏览器上的用户都能有一个良好的体验。

    实现跨浏览器的placeholder,兼容IE7

    在这个场景下,它将作为实现`placeholder`兼容性的基础,因为jQuery提供了一致的API来处理不同浏览器之间的差异。 `common_util.js`可能包含了一些通用的JavaScript工具函数,这些函数可能被用来辅助实现`...

    登录表单兼容placeholder的方法

    然而,`placeholder`属性在某些老旧的浏览器或不完全支持HTML5的环境中可能无法正常工作,这就需要我们通过JavaScript进行兼容性处理,以确保所有用户都能获得一致的体验。 首先,理解`placeholder`属性的基本用法...

    JqueryPlaceHolder

    `jQuery Placeholder`插件就是这样的一个解决方案,它为不支持`placeholder`属性的浏览器提供了一个优雅的降级处理。 本文将深入探讨`jQuery Placeholder`插件的工作原理、如何使用以及其在解决IE浏览器兼容性问题...

    input的placeholder属性兼容ie8 优化版

    `placeholder` 属性的原生支持始于 HTML5,因此,对于那些不支持 HTML5 的浏览器,如 IE8 和 IE9,我们需要通过 JavaScript 或 jQuery 插件来模拟这一功能。在描述中提到的方法是通过创建一个 `&lt;span&gt;` 元素来显示...

    jquery-placeholder:一个简单的 jQuery 占位符插件

    - "jquery-placeholder" 插件旨在兼容那些不支持原生 `placeholder` 特性的浏览器,如老版本的 Internet Explorer。 - 当浏览器本身已经支持 `placeholder` 属性时,该插件将自动检测并跳过,以避免不必要的处理,...

Global site tag (gtag.js) - Google Analytics