如何在字段中设置占位符文本的样式？

问题描述：

我有一个处理占位符文本的逻辑两个输入字段这个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"); 
    } 
}); 

});

我想样式占位符文本，以便它有不同的造型比文本的用户类型到现场。我怎样才能做到这一点？

答

给文本框一个特殊的类，它会在focus()上消失，如果没有内容，则会在blur()上添加。

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

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

并添加类，当用户blur S和文字是默认的。

答

你试过......

$("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 
}});

答

编辑：误解了问题，以为您使用的占位符HTML属性。现在我看到你不是，并且应该在这里使用其他答案，但我会留下我的答案，以防万一你想使用占位符属性。

占位符的造型是不是还广泛实施，那么你将不得不使用供应商前缀属性：

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

:-moz-placeholder { 
    color: red; 
}

HERE是CSS选择一个漂亮的文章，占位符，它是通过在不同的浏览器。

干杯

如何在字段中设置占位符文本的样式？

相关推荐