以下格式的文本框的佔位符對於Internet Explorer無效。無論如何要在Internet Explorer中顯示TextBox的佔位符？不適用於Internet Explorer的佔位符
<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日：以前的代碼無法檢測時，瀏覽器沒有爲佔位符的原生支持。使用找到的代碼in this other post現在已修復。受影響的瀏覽器：IE7和IE8，或許還有其他的。還增加了調試支持來幫助調試未來的問題。
2013年1月30日：
添加密碼輸入支持。由於IE8及以下版本不允許動態更改輸入類型，因此只要沒有輸入密碼，代碼就會使用文本輸入替換密碼輸入，因此佔位符文本將可見。
修復了在提交與輸入相關聯的表單時發送空值應發送到服務器的佔位符值的問題。爲了達到這個目的，代碼被附加到表單提交事件上，並在需要時清除該值。
2014年1月24日：增加對<textarea>元件的支持。
哇謝謝，我繞過整個互聯網尋找一個在IE中工作的佔位符回退。最後，這是一個。 – Baseer 2012-05-07 02:49:23
@Baseer歡呼，很高興看到它被使用。 :) – 2012-05-09 21:46:48
@ShadowWizard這不適用於IE7或IE8。它適用於IE9，但不適用於密碼輸入。 – 2012-08-09 23:55:56
佔位符是HTML5功能。要解決我發現MSIE和做到這一點：
if ($.browser.msie) {
$("#textarea-id").val('placeholder');
$("#textarea-id").focus(function(){
this.select();
});
}
它的jQuery但並不是很複雜......
我不使用HTML5 :( – 2011-12-25 07:42:11
它可能不是那麼複雜，但爲什麼要使用31KB庫僅此expletively簡單的任務有幾個？幾百個字節的純JS似乎吸塵器我:) – 2011-12-25 11:57:51
@reanimation，固點 – 2011-12-25 13:23:51
有許多書面填充工具腳本，將添加佔位符支持本身不瀏覽器支持該技術。
而不是重複什麼在其他地方寫的，我建議你去這裏：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills和向下滾動有關的1/3方式部分標題爲Web窗體：輸入佔位符一些不同的選項（包括本地JS和jQuery）。由於整個頁面由HTML5 Boilerplate團隊策劃，因此您可以相當肯定所提供的腳本質量不錯。
編輯：剛剛看到您關於不使用HTML5的評論。我提供的鏈接上的腳本應該仍然工作，即使您不使用HTML5文檔類型（不保證明示或暗示等）。
最近我有這個問題 - 我使用Modernizr的檢測HTML5的特性，然後跑了一下JS的對於不能應付的瀏覽器：
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>
原帖聲明，他不想使用jQuery。 – Scottie 2013-05-10 07:27:41
我已經寫了這個簡單的代碼，並進行測試時，我工作得很好：
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);
您的代碼在ie中工作，但在FF和GC瀏覽器中佔位符文本變得粗體，如果我點擊正常字體出現在輸入框中，我不打包查看輸入的數據。對於調試，我刪除了DOM從底部開始添加並添加到頂部，FF＆GC中的問題看起來很好，但佔位符不在IE中。 – user2086641 2013-08-28 07:55:01
優秀的東西！但是我已經把函數初始化放入了一個條件，比如'if（$ .browser.msie && $ .browser.version <='9.0'）'。非常感謝！ – 2014-01-21 17:30:29
可以使用JavaScript Polyfill，使舊版瀏覽器上的佔位符的工作。那裏有很多Polyfills。這裏是一個談到Making Placeholders work in IE。基本上，所有這些腳本所做的就是模擬使用JavaScript的瀏覽器原生佔位符支持的行爲。
http://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there – noob 2011-12-25 06:37:42
[佔位符屬性的可能重複**不應該**作爲一種替代的標籤（http://www.w3.org/TR/html5/common-input-element-attributes.html#the-placeholder-attribute） – Quentin 2012-11-12 16:07:40
更改行＃11至：如果（ ！curInput.type || curInput.type == 「」 || curInput.type == 「文本」 || curInput.type == 「密碼」）...和它的作品爲密碼字段，以及！ – 2012-11-12 16:04:57