对<asp:IE 10的TextBox;不起作用

Using placeholder for <asp:TextBox for IE 10 doesn't work

本文关键字：TextBox 不起作用 IE lt asp 更新时间：2023-09-26

我的html代码中有以下代码：

<asp:TextBox ID="txtSearch" runat="server"  CssClass="input-xxlarge" type="text" Font-Size="10px" placeholder="Type Here" Height="20px" Width="100px"  ></asp:TextBox>

占位符未出现在页面上。

我认为这个问题是因为IE10。

有没有办法在<asp:TextBox里面显示占位符？

这不是IE-10中的问题。请按IE浏览器上的F12键，然后选择浏览器模式：IE10，文档模式：em>标准

我使用JavaScript代码解决了这个问题。这真的很简单。

我想和你分享一下。你什么都不用做，只要使用这个js就可以了。

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 />";
    }
  }