你們都用什麼來支持瀏覽器中的佔位符屬性？IE中不支持佔位符屬性。有什麼建議麼？
目前，正在使用：
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
也試過這個插件無濟於事：
https://github.com/danbentley/placeholder
但它似乎並沒有與IE工作...更多特別是IE 8.任何其他建議/替代方案？
現在我應該忘記佔位符屬性了嗎？
你說得對，IE8不支持placeholder屬性。 placeholder是HTML5規範的一部分，IE8在HTML5被髮布之前已經發布了很長時間。
以無縫方式處理它的最佳方式是使用類似Modernizr這樣的工具來檢測瀏覽器是否支持佔位符功能，並在不支持JS運行腳本的情況下運行JS腳本。
if(!Modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
有很多佔位符polyfill腳本可供下載。選擇一個使用placeholder屬性的應用程序，以便您只需在一個地方爲所有瀏覽器定義佔位符字符串。這裏有一個你可以嘗試：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
希望有幫助。
這裏的問題是，即使JS填充腳本似乎不適用於鏈接引用的IE –
+1。 –
另一個很好的資源，在'佔位符'部分有一個鏈接列表：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills –
這是我在我的一個項目中使用的。唯一的情況是我只需要一個元素的佔位符，所以它可能不適合您的情況。但是剛剛拿到的代碼是多麼簡單的想法：
(function(){
var nameInput = document.getElementById('your-id-here');
var placeHolderSupport = ("placeholder" in document.createElement("input"));
if(!placeHolderSupport)
{
//show hint in gray
var placeholder = nameInput.getAttribute('placeholder');
nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
nameInput.onblur();
}
})()
事實上，截至2011年10月19日，IE瀏覽器都沒有支持佔位符屬性。我已經在7,8和9中進行了測試，沒有人看到它。你會認爲ie9，看到它應該如何支持css3和html5會解決這個問題，但它並沒有出現。
作爲一種簡單的解決方法就是不漂亮，但能夠完成，你可以使用一些JavaScript這樣的工作：
<input type="text" value="Enter ZIP"
onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
這不會返回值'onblur' – gdoron
有相當多的佔位符屬性的一些填充工具腳本。這是one that seems to work well。
只記得在你的JS代碼中調用$('input, textarea').placeholder();，並可能添加一個CSS規則，例如。 .placeholder { color: #aaa }。
這是直接從我的項目中的代碼，本身在鉻中工作，並使用IE8中的polyfill ...這裏有一個警告，在這裏進行測試，顯示何時調用polyfill。 您需要將modernizr作爲使用此代碼的先決條件加載，但在您的<head>部分中包含一個簡單腳本將執行此操作。
<script type="text/javascript">
$('document').ready(function() {
if (!Modernizr.input.placeholder) {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
alert("no place holders");
}
});
</script>
這將帶來問題，如果我們將在JavaScript中使用佔位符值。我們將得到文本，而不是實際的空字符串。 –
我在我的項目中做了什麼來防止這種情況發生在提交事件中，如果文本值等於佔位符值，我將該值設置爲null。這仍然有點冒失，但不幸的是，支持舊版瀏覽器的人往往有時會這樣。 –
在我看過的所有其他答案和示例中，我發現了一些問題。我寫了自己的解決方案來解決這些問題，並決定在這裏發佈。該兩件事情我的代碼將正確的是，其他的解決方案似乎有問題的處理是：
包括Modernizr的和JQuery如下：
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>
添加一些CSS，如：
<style type="text/css" media="all">
.placeholder {
color: #aaa;
}
</style>
然後你需要的主要代碼：
<script type="text/javascript">
$(document).ready(function() {
// Only do anything if the browser does not support placeholders
if (!Modernizr.input.placeholder) {
// Format all elements with the placeholder attribute and insert it as a value
$('[placeholder]').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
$(this).focus(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});
});
// Clean up any placeholders if the form gets submitted
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
});
// Clean up any placeholders if the page is refreshed
window.onbeforeunload = function() {
$('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
};
}
});
</script>
我掙扎與此我自己。我找到了一個工作。它在IE8和Chrome中運行的非常好。我開發了一個涼爽的工作走一走，它說明如下......
HTML
<input type="text" class="input-remover badinput" value="Business Name">
<input type="text" class="input-remover badinput" value="Business Address 1">
<input type="text" class="input-remover badinput" value="Business Address 2">
<input type="text" class="input-remover badinput" value="City">
與類輸入卸妝所有輸入字段都將受到影響。只需將您想要用作佔位符的文字放入值中即可。 badinput類用於防止某人使用默認值提交輸入字段。
JQuery的
var textval
$(".input-remover").click(function(){
textval = this.value;
$(this).addClass("currentspot");
if ($(this).hasClass("placeholder"))
{
}else{
$(this).val("");
}
});
$("input").keypress(function(){
$(".currentspot").removeClass("badinput");
$(".currentspot").addClass("placeholder");
});
$("input").blur(function(){
if ($(this).hasClass("placeholder"))
{
$(".currentspot").removeClass("currentspot");
}else{
$(".currentspot").val(textval);
$(".currentspot").removeClass("currentspot");
}
});
老實說，身份證解釋這一部分，但我真的認爲信息技術司更容易說，不對其進行編輯。 IT方式很好。是的，你可以修改它，但我會避免它，除非你知道你在做什麼，以防止它的行爲。
我還包括一個JsFiddle顯示它的工作。我希望它有幫助。我認爲大部分我喜歡的東西都是鑽機。但至少從此成爲可能。祝你好運！
小提琴Here
如果IE8的支持是根本的話，是的，你應該忘掉它不支持的功能。如果佔位符對你的用戶很好，但不是基本的，那就使用它們，不要擔心IE8。 – robertc
如果它們是基礎性的，那麼你就錯了。提示不應該是理解輸入的基本要求。 – Quentin
你能找到解決方案嗎？ – learning