占位符不适用于Internet Explorer
以下格式的文本框占位符不适用于Internet Explorer。 无论如何要在Internet Explorer中显示TextBox的占位符？
<asp:TextBox id="email" runat="server" width="300" placeholder="Your email" />
有什么简单的方法只是通过使用任何JavaScript。 我不想使用jQuery使它变得复杂。
你可以使用纯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 />";
}
}
如果浏览器已经支持placeholder属性，这将不会做任何事情，并且如果它不被支持（例如浏览器是IE），它将添加非常类似的功能 - 默认显示的文本消失在焦点上，并且如果用户没有输入任何内容
现场测试案例。
Bug修复
2012年11月6日：当浏览器没有占位符的本机支持时，以前的代码无法检测到。 使用在其他帖子中找到的代码现在已经修复。 受影响的浏览器：IE7和IE8，或许还有其他的。 还增加了调试支持来帮助调试未来的问题。
2013年1月30日：
添加对密码输入的支持。 由于IE8及以下版本不允许动态更改输入类型，因此只要没有输入密码，代码就会使用文本输入替换密码输入，因此占位符文本将可见。
修复了在提交与输入相关联的表单时应将空值发送到服务器的情况下发送占位符值的错误。 为了达到这个目的，代码被附加到表单提交事件上，并在需要时清除该值。
2014年1月24日：添加对<textarea>元素的支持。
有许多编写的polyfill脚本，它们会向不支持本地技术的浏览器添加占位符支持。
我建议不要重复其他地方写的内容，而是建议您到这里：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills，并向下滚动约1/3部分Web窗体：为几个不同的选项（原生JS和jQuery） 输入占位符 。 由于整个页面由HTML5 Boilerplate团队策划，因此您可以相当肯定所提供的脚本质量不错。
编辑：刚刚看到您关于不使用HTML5的评论。 即使您没有使用HTML5文档类型（不保证明示或暗示等），我提供的链接上的脚本仍然可以正常工作。
我写了这个简单的代码，测试时它对我很好：
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);
上一篇: Placeholder not working for Internet Explorer
下一篇: Prevent decimal rounding in Entity Framework database first