zoukankan      html  css  js  c++  java
  • placeholder是H5的一个新属性,但是在IE9以下是不支持的

    $(function() {
        // 如果不支持placeholder,用jQuery来完成
        if(!isSupportPlaceholder()) {
            // 遍历所有input对象, 除了密码框
            $('input').not("input[type='password']").each(
                function() {
                    var self = $(this);
                    var val = self.attr("placeholder");
                    input(self, val);
                }
            );
    
            /**
             *  对password框的特殊处理
             * 1.创建一个text框 
             * 2.获取焦点和失去焦点的时候切换
             */
            $('input[type="password"]').each(
                function() {
                    var pwdField    = $(this);
                    var pwdVal      = pwdField.attr('placeholder');
                    var pwdId       = pwdField.attr('id');
                    // 重命名该input的id为原id后跟1
                    pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
                    var pwdPlaceholder = $('#' + pwdId + '1');
                    pwdPlaceholder.show();
                    pwdField.hide();
    
                    pwdPlaceholder.focus(function(){
                        pwdPlaceholder.hide();
                        pwdField.show();
                        pwdField.focus();
                    });
    
                    pwdField.blur(function(){
                        if(pwdField.val() == '') {
                            pwdPlaceholder.show();
                            pwdField.hide();
                        }
                    });
                }
            );
        }
    });
    
    // 判断浏览器是否支持placeholder属性
    function isSupportPlaceholder() {
        var input = document.createElement('input');
        return 'placeholder' in input;
    }
    
    // jQuery替换placeholder的处理
    function input(obj, val) {
        var $input = obj;
        var val = val;
        $input.attr({value:val});
        $input.focus(function() {
            if ($input.val() == val) {
                $(this).attr({value:""});
            }
        }).blur(function() {
            if ($input.val() == "") {
                $(this).attr({value:val});
            }
        });
    }
  • 相关阅读:
    信息收集-DNS
    Xshell下载
    JSP
    本地网络配置
    P1485 火枪打怪
    P4155 [SCOI2015]国旗计划
    P1017 [NOIP2000 提高组] 进制转换
    P1013 [NOIP1998 提高组] 进制位
    P1011 [NOIP1998 提高组] 车站
    CF841B Godsend
  • 原文地址:https://www.cnblogs.com/zhangtianqi520/p/7125977.html
Copyright © 2011-2022 走看看