如何在字段中設置佔位符文本的樣式？

我有一個處理佔位符文本的邏輯兩個輸入字段這個jQuery代碼：如何在字段中設置佔位符文本的樣式？

$(document).ready(function() { 

$("form input.link").attr("value", "Media Link Here (optional)"); 
$("form input.email").attr("value", "*Email Address Here"); 

$("form input.link").live("focus", function() { 
    if ($(this).val() == "Media Link Here (optional)"){ 
    $(this).val(""); 
    } 
}); 

$("form input.email").live("focus", function() { 
    if ($(this).val() == "*Email Address Here"){ 
    $(this).val(""); 
    } 
}); 

$("form input.link").live("focusout", function() { 
    if ($(this).val() == ""){ 
    $(this).attr("value", "Media Link Here (optional)"); 
    } 
}); 

$("form input.email").live("focusout", function() { 
    if ($(this).val() == ""){ 
    $(this).attr("value", "*Email Address Here"); 
    } 
}); 

});

我想樣式佔位符文本，以便它有不同的造型比文本的用戶類型到現場。我怎樣才能做到這一點？

來源

2011-04-28 Justin Meltzer

給文本框一個特殊的類，它會在focus()上消失，如果沒有內容，則會在blur()上添加。

.placeholder { 
    color: gray; 
    font-style: italic; 
} 

$('.box').focus(function() { 
    if (this has default text) { 
    $(this).val(''); 
    $(this).removeClass('placeholder'); 
    } 
});

並添加類，當用戶blur S和文字是默認的。

來源

2011-04-28 03:59:38 Blender

你試過......

$("form input.email").live("focus", function() { 
if ($(this).val() == "*Email Address Here"){ 
$(this).css("cssvalueyouwant", "value you want to set"); //set to normal 
$(this).val(""); }}); 
$("form input.email").live("focusout", function() { 
    if ($(this).val() == ""){ 
    $(this).attr("value", "*Email Address Here"); 
    $(this).css("cssvalueyouwant", "value you want to set"); //set to special 
}});

來源

2011-04-28 04:02:50

編輯：誤解了問題，以爲您使用的佔位符HTML屬性。現在我看到你不是，並且應該在這裏使用其他答案，但我會留下我的答案，以防萬一你想使用佔位符屬性。

佔位符的造型是不是還廣泛實施，那麼你將不得不使用供應商前綴屬性：

::-webkit-input-placeholder { 
    color: red; 
} 

:-moz-placeholder { 
    color: red; 
}

HERE是CSS選擇一個漂亮的文章，佔位符，它是通過在不同的瀏覽器。

乾杯

來源

2011-04-28 04:08:14 jcane86

如何在字段中設置佔位符文本的樣式？

回答

相關問題