Html 占位符不适用于Internet Explorer

以下格式的“我的文本框”占位符不适用于Internet Explorer。是否在Internet Explorer中显示文本框的占位符

---

是否有任何简单的方法只需使用任何JavaScript。我不想让jQuery变得复杂。

占位符是HTML5的一个特性。要解决此问题，请检测MSIE并执行以下操作：

if ( $.browser.msie ) {
    $("#textarea-id").val('placeholder');
    $("#textarea-id").focus(function(){
        this.select();
    });
}

---

它的jquery但是没有那么复杂…

有许多编写的polyfill脚本，它们将为本机不支持该技术的浏览器添加占位符支持

与其重复其他地方写的内容，我建议您到这里：向下滚动大约1/3到标题为Web表单：输入占位符的部分，查看一些不同的选项（原生JS和jQuery）。因为整个页面都是由HTML5样板团队策划的，所以您可以相当肯定所提供的脚本质量不错

---

编辑：刚刚看到你关于不使用HTML5的评论。即使您没有使用HTML5 doctype（没有明示或暗示的保证，等等），我提供的链接上的脚本也应该仍然可以工作。

您可以使用纯JavaScript模仿这一点：

var _debug = false;
var _placeholderSupport = function() {
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
}();

window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    var arrTextareas = document.getElementsByTagName("textarea");
    var combinedArray = [];
    for (var i = 0; i < arrInputs.length; i++)
        combinedArray.push(arrInputs[i]);
    for (var i = 0; i < arrTextareas.length; i++)
        combinedArray.push(arrTextareas[i]);
    for (var i = 0; i < combinedArray.length; i++) {
        var curInput = combinedArray[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea")
            HandlePlaceholder(curInput);
        else if (curInput.type == "password")
            ReplaceWithText(curInput);
    }

    if (!_placeholderSupport) {
        for (var i = 0; i < document.forms.length; i++) {
            var oForm = document.forms[i];
            if (oForm.attachEvent) {
                oForm.attachEvent("onsubmit", function() {
                    PlaceholderFormSubmit(oForm);
                });
            }
            else if (oForm.addEventListener)
                oForm.addEventListener("submit", function() {
                    PlaceholderFormSubmit(oForm);
                }, false);
        }
    }
};

function PlaceholderFormSubmit(oForm) {    
    for (var i = 0; i < oForm.elements.length; i++) {
        var curElement = oForm.elements[i];
        HandlePlaceholderItemSubmit(curElement);
    }
}

function HandlePlaceholderItemSubmit(element) {
    if (element.name) {
        var curPlaceholder = element.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) {
            element.value = "";
            window.setTimeout(function() {
                element.value = curPlaceholder;
            }, 100);
        }
    }
}

function ReplaceWithText(oPasswordTextbox) {
    if (_placeholderSupport)
        return;
    var oTextbox = document.createElement("input");
    oTextbox.type = "text";
    oTextbox.id = oPasswordTextbox.id;
    oTextbox.name = oPasswordTextbox.name;
    //oTextbox.style = oPasswordTextbox.style;
    oTextbox.className = oPasswordTextbox.className;
    for (var i = 0; i < oPasswordTextbox.attributes.length; i++) {
        var curName = oPasswordTextbox.attributes.item(i).nodeName;
        var curValue = oPasswordTextbox.attributes.item(i).nodeValue;
        if (curName !== "type" && curName !== "name") {
            oTextbox.setAttribute(curName, curValue);
        }
    }
    oTextbox.originalTextbox = oPasswordTextbox;
    oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox);
    HandlePlaceholder(oTextbox);
    if (!_placeholderSupport) {
        oPasswordTextbox.onblur = function() {
            if (this.dummyTextbox && this.value.length === 0) {
                this.parentNode.replaceChild(this.dummyTextbox, this);
            }
        };
    }
}

function HandlePlaceholder(oTextbox) {
    if (!_placeholderSupport) {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() {
                var _this = this;
                if (this.originalTextbox) {
                    _this = this.originalTextbox;
                    _this.dummyTextbox = this;
                    this.parentNode.replaceChild(this.originalTextbox, this);
                    _this.focus();
                }
                Debug("input box '" + _this.name + "' focus");
                _this.style.color = _this.getAttribute("old_color");
                if (_this.value === curPlaceholder)
                    _this.value = "";
            };
            oTextbox.onblur = function() {
                var _this = this;
                Debug("input box '" + _this.name + "' blur");
                if (_this.value === "") {
                    _this.style.color = "#c0c0c0";
                    _this.value = curPlaceholder;
                }
            };
        }
        else {
            Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
        }
    }
    else {
        Debug("browser has native support for placeholder");
    }
}

function Debug(msg) {
    if (typeof _debug !== "undefined" && _debug) {
        var oConsole = document.getElementById("Console");
        if (!oConsole) {
            oConsole = document.createElement("div");
            oConsole.id = "Console";
            document.body.appendChild(oConsole);
        }
        oConsole.innerHTML += msg + "<br />";
    }
}

var\u debug=false；
var_占位符support=函数（）{
var t=document.createElement（“输入”）；
t、 type=“text”；
返回（t.placeholder的类型！=“未定义”）；
}();
window.onload=函数（）{
var arrInputs=document.getElementsByTagName（“输入”）；
var arrTextareas=document.getElementsByTagName（“textarea”）；
var combinedArray=[]；
对于（var i=0；i0&&element.value===curPlaceholder）{
element.value=“”；
setTimeout（函数（）{
element.value=curPlaceholder；
}, 100);
}
}
}
函数替换为文本（oPasswordTextbox）{
如果（支持）
返回；
var oTextbox=document.createElement（“输入”）；
oTextbox.type=“text”；
oTextbox.id=oPasswordTextbox.id；
oTextbox.name=oPasswordTextbox.name；
//oTextbox.style=oPasswordTextbox.style；
oTextbox.className=oPasswordTextbox.className；
对于（var i=0；i0）{
调试（“为输入框找到了占位符”“+oTextbox.name+”：“+curPlaceholder”）；
oTextbox.value=curPlaceholder；
setAttribute（“旧颜色”，oTextbox.style.color）；
oTextbox.style.color=“#c0”；
oTextbox.onfocus=函数（）{
var_this=这个；
如果（此.originalTextbox）{
_this=this.originalTextbox；
_this.dummyTextbox=此；
this.parentNode.replaceChild（this.originalTextbox，this）；
_这是focus（）；
}
调试（“输入框”+_this.name+“‘焦点”）；
_this.style.color=\u this.getAttribute（“旧颜色”）；
if（_this.value==curPlaceholder）
_此值为“”；
};
oTextbox.onblur=函数（）{
var_this=这个；
调试（“输入框”+_this.name+“‘模糊”）；
如果（_this.value==“”）{
_this.style.color=“#c0”；
_this.value=curPlaceholder；
}
};
}
否则{
调试（“输入框”“+oTextbox.name+”'没有占位符属性”）；
}
}
否则{
调试（“浏览器本机支持占位符”）；
}
}
函数调试（msg）{
if（typeof _debug！=“undefined”&&&&u debug）{
var oCons
    function addPlaceHolder(input) {//using modernizr add placeholder text for non html5 users
    if (!Modernizr.input.placeholder) { 
        input.focus(function () {
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
        $(input).parents('form').submit(function () {
            $(this).find(input).each(function () {
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        });
    }
}

addPlaceHolder($('#Myinput'));

<script type="text/javascript">


function addPlaceHolder(input) {

    if (!Modernizr.input.placeholder) {
        input.focus(function () {
            if ($(this).val() == $(this).attr('placeholder')) {
                $(this).val('');
                $(this).removeClass('placeholder');
            }
        }).blur(function () {
            if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) {
                $(this).addClass('placeholder');
                $(this).val($(this).attr('placeholder'));
            }
        }).blur();
        $(input).parents('form').submit(function () {
            $(this).find(input).each(function () {
                if ($(this).val() == $(this).attr('placeholder')) {
                    $(this).val('');
                }
            })
        });
     }
 }

    addPlaceHolder($(':text'));
    addPlaceHolder($('textarea'));

</script>

placeholder=function(){
    $('input, textarea').each(function(){
        var holder=$(this).attr('placeholder');
        if(typeof(holder) !=='undefined'){
            $(this).val(holder);
            $(this).bind('click',function(){
                $(this).val('');
            }).blur(function(){
                $(this).val(holder);
            });
        }
    });
};
$(document).ready(placeholder);