• 解决ie8 input 垂直方向默认不居中,ie8下placeholder失效


    在input标签添加vertical-align:middle;line-height:xx px样式

    引入placeholder插件解决placeholder失效的问题。

    <script type="text/javascript">
        //判断浏览器是否支持 placeholder属性  
        function isPlaceholder() {
            var input = document.createElement('input');
            return 'placeholder' in input;
        }
    
        $(document).ready(function () {
            if (!isPlaceholder()) {  //不支持placeholder 用jquery来完成
                var loginAccount = document.getElementById('LoginAccount').getAttributeNode('placeholder').nodeValue;
                var LoginPassword = document.getElementById('LoginPassword').getAttributeNode('placeholder').nodeValue;
                var style = document.getElementById('LoginPassword').getAttributeNode('class').nodeValue;
                $("input[id='LoginAccount']").each(//把input绑定事件 排除password框  
                    function () {
    
                        if ($(this).val() == "" && loginAccount != "") {
                            $(this).val(loginAccount);
                            $(this).focus(function () {
                                if ($(this).val() == loginAccount) $(this).val("");
                            });
                            $(this).blur(function () {
                                if ($(this).val() == "") $(this).val(loginAccount);
                            });
                        }
                    });
                //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换  
                var pwdField = $("input[type=password]");
                var pwdVal = LoginPassword;
                pwdField.after('<input id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" class="' + style + '"  tabindex = "2" />');
                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();
                    }
                });
    
                if (document.getElementById('LoginValCode') != null) {
                    var LoginValCode = document.getElementById('LoginValCode').getAttributeNode('placeholder').nodeValue;
                    var style = document.getElementById('LoginValCode').getAttributeNode('class').nodeValue;
                    $("input[id='LoginValCode']").each(//把input绑定事件 排除password框  
                    function () {
    
                        if ($(this).val() == "" && LoginValCode != "") {
                            $(this).val(LoginValCode);
                            $(this).focus(function () {
                                if ($(this).val() == LoginValCode) $(this).val("");
                            });
                            $(this).blur(function () {
                                if ($(this).val() == "") $(this).val(LoginValCode);
                            });
                        }
                    });
                }
            }
        });  
    
    </script>
  • 相关阅读:
    斯坦福ML公开课笔记15—隐含语义索引、神秘值分解、独立成分分析
    [cocos2d-x]屏幕自适应解决的方法
    【机器学习实验】学习Python来分类现实世界的数据
    按花生酱,赞不绝口——敏捷12准则的敏捷解释
    linux命令笔记之ls
    HTML5 Canvas动画效果实现原理
    互联网+时代的人生必修课—逆商
    WebService的相关使用
    将一个链表中的结点依照奇偶分成两个链表
    web开发性能优化---用户体验篇
  • 原文地址:https://www.cnblogs.com/-ting/p/12743782.html
Copyright © 2020-2023  润新知