Solve that the vertical direction of ie8 input is not centered by default, and the placeholder under ie8 is invalid

Add vertical-align: middle; line-height: xx px style to input tag

Introduce placeholder plugin to solve the problem of placeholder failure.

<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 (// Exclude the input binding event from the password box  
                function () {
            var pwdVal = LoginPassword;

                    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); 
                        }); 
                    } 
                }); 
            // Special treatment for the password box 1. Create a text box 2 Switch when getting focus and losing focus   
            var pwdField = $ ("input [type = password]" );
            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>

Guess you like

Origin www.cnblogs.com/-ting/p/12743782.html