占位符不适用于Internet Explorer [英] Placeholder not working for Internet Explorer
问题描述
< asp：TextBox id =emailrunat =serverwidth = 300placeholder =您的电子邮件地址/>
有什么简单的方法可以使用任何JavaScript。
您可以使用纯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者，恕不[I];
if（oForm.attachEvent）{
oForm.attachEvent（onsubmit，function（）{
PlaceholderFormSubmit（oForm）;
}）;
}
else if（oForm.addEventListener）
oForm.addEventListener（submit，function（）{
PlaceholderFormSubmit（oForm）;
}，false）;
}
}
};
函数PlaceholderFormSubmit（oForm）{
for（var i = 0; i< oForm.elements.length; i ++）{
var curElement = oForm.elements [i] ;
HandlePlaceholderItemSubmit（curElement）;
函数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）;
}
函数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）;
}
};
函数HandlePlaceholder（oTextbox）{
if（！_placeholderSupport）{
var curPlaceholder = oTextbox.getAttribute（placeholder）;
if（curPlaceholder&& curPlaceholder.length> 0）{
Debug（找到输入框的占位符+ 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 +'没有占位符属性）;
else {
Debug（浏览器本地支持占位符）;
函数调试（msg）{
if（typeof _debug！==undefined&& _debug）{
var oConsole = document.getElementById（Console）;
if（！oConsole）{
oConsole = document.createElement（div）;
oConsole.id =控制台;
document.body.appendChild（oConsole）;
}
oConsole.innerHTML + = msg +< br />;
$ b 如果浏览器已经支持 placeholder 属性，并且如果它不被支持（例如浏览器是IE），它将添加非常类似的功能 - 默认显示的文本消失在焦点上，如果用户didn 't type anything。
现场测试用例 a>。
错误修正
2012年11月6日：当浏览器没有占位符的本地支持时，以前的代码无法检测到。使用在其他帖子中找到的代码现在已经修复。受影响的浏览器：IE7和IE8，或许还有其他的。还添加了调试支持来帮助调试未来的问题。
$ b 2013年1月30日：
-
添加对密码输入的支持。由于IE8及以下版本不允许动态更改输入类型，因此只要没有输入密码，代码就会用文本输入替换密码输入，因此占位符文本将可见。
b $ b -
修复了在提交与输入相关联的表单时应将空值发送到服务器的情况下发送占位符值的问题。为了实现这一点，代码被附加到表单提交事件，并在需要时清除值。
24，2014 ：添加对< textarea> 元素的支持。
Placeholder for my textbox in below format is not working for Internet Explorer. Is there anyway to display placeholder for TextBox in Internet Explorer?
<asp:TextBox id="email" runat="server" width="300" placeholder="Your email" />
Is there any simple way just by using any JavaScript. I am not interested to make it complicated using jQuery.
解决方案 You can imitate this using pure 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 />";
}
}
This will do nothing if the browser is already supporting the placeholder attribute, and in case it's not supported (e.g. the browser is IE) it will add very similar functionality - text shown by default that disappear on focus and appears again if user didn't type anything.
Bug Fixes
Nov 6, 2012: Previous code failed to detect when browser didn't have native support for placeholder. Using code found in this other post it's now fixed. Affected browsers: IE7 and IE8, maybe others as well. Also added debug support to help debug future problems.
Jan 30, 2013:
Adding support for password input as well. Since IE8 and below won't allow dynamic change of input type, the code is replacing the password input with text input as long as there is no password typed, thus the placeholder text will be visible.
Fixed bug that caused the placeholder value to be sent where empty value should be sent to the server when the form associated with the input is being submitted. To achieve this, code is attached to the form submit event and clear the value if needed.
Jan 24, 2014: adding support for <textarea> elements.
这篇关于占位符不适用于Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
