ie8中支持 password 的 placeholder

之前写过一篇 ie8中使用placeholder 的博客，但是，该文中的 placeholder 在 type="password" 时会出现问题，不能显示文字而是密码类型的点，所以又找了以下的这段代码，可以解决密码的问题，使用方法和之前介绍的一样，只需在 </body> 之前引用该 js 文件即可。

(function () {
    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        getCharCode: function (event) {
            if (typeof event.charCode === "number") {
                return event.charCode;
            } else {
                return event.keyCode;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        }
    };
    EventUtil.addHandler(document, 'readystatechange', function () {
        if (!('placeholder' in document.createElement('input'))) {
            var inputdoc = document.getElementsByTagName('input');
            var hasPlaceholder = new Array();
            for (var i in inputdoc) {
                if (typeof (inputdoc[i]) === 'object' && inputdoc[i].getAttribute('placeholder') != null) {
                    hasPlaceholder.push(inputdoc[i]);
                }
            }
            if (hasPlaceholder.length > 0) {
                var holders = new Array;
                for (var i = 0; i < hasPlaceholder.length; i++) {
                    var span = document.createElement('span');
                    // span.className = 'ui-placeholder';
                    var input = hasPlaceholder[i];
                    span.height = input.height;
                    span.width = input.width;
                    span.innerHTML = input.getAttribute('placeholder');
                    if (input === input.parentNode.lastChild) {
                        input.parentNode.appendChild(span);
                    } else {
                        input.parentNode.insertBefore(span, input.nextSibling);
                    }
                    span.style.color = "#999";
                    span.style.textIndent = '0.5em';
                    span.style.position = "absolute";
                    span.style.top = input.offsetTop + "6px";
                    span.style.left = input.offsetLeft;
                    holders[i] = span;
                }
                var togglePlaceholder = function (event) {
                    event = EventUtil.getEvent(event);
                    var target = EventUtil.getTarget(event);
                    // alert(target.value)
                    for (var i in hasPlaceholder) {
                        if (target === hasPlaceholder[i]) {
                            if (hasPlaceholder[i].value != '') {
                                holders[i].style.display = 'none';
                            } else if (/[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(EventUtil.getCharCode(event)))) {

                                holders[i].style.display = 'none';
                            } else {
                                holders[i].style.display = 'block';
                            }
                        }
                    }
                }

                EventUtil.addHandler(document, 'keydown', togglePlaceholder)

                EventUtil.addHandler(document, 'keyup', function (event) {
                    event = EventUtil.getEvent(event);
                    var target = EventUtil.getTarget(event);
                    // alert(target.value)
                    for (var i in hasPlaceholder) {
                        if (target === hasPlaceholder[i]) {
                            if (hasPlaceholder[i].value != '') {
                                holders[i].style.display = 'none';
                            } else {
                                holders[i].style.display = 'block';
                            }
                        }
                    }
                })
            }
        }
    })
}).call()

原文在 ie的placeholder支持。

转载于:https://www.cnblogs.com/ntt1219/p/3480440.html