Question

我有这个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");
  }
});

});

我想设置占位符文本的样式，使其具有与用户在字段中键入的文本不同的样式。我怎么能这样做？

Answer 1

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

占位符样式尚未广泛实施，因此您必须使用供应商前缀属性：

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

:-moz-placeholder {
    color: red;
}

HERE是关于占位符的css选择器的一篇很好的文章，它在不同的浏览器中被采用。

干杯

Answer 2

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

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

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

在用户blur和文本默认时添加该类。

Answer 3

你试过试试......

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

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

3 个答案: