Question

我可以在输入元素（我的“消失文本”）中创建我的标签：

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name"
 onfocus="if(this.value==this.defaultValue)this.value=''" 
 onblur="if(this.value=='')this.value=this.defaultValue" />

然后设置样式，使我消失的文字消失（＃333）。当我开始在字段中输入值时，文本为黑色（＃000）。

CSS

input[type=text] {
    color: #333;
}
input[type=text]:focus {
    color: #000;
}

一切正常，直到你移动到下一个输入字段。然后，您刚输入值的字段将更改回#333颜色。我可以看到为什么会发生这种情况，但是如果输入字段已经输入了值，则无法确定如何将值保持为黑色#000颜色。

提前感谢您的协助和教育！

Answer 1

HTML5

HTML5为名为<input>的{{1}}标记带来了一个方便的属性，可以支持此功能。

jsFiddle

placeholder

支持

所有最新的浏览器都支持此功能，IE9 and below don't however。

`<input type="text" placeholder="Search..." />`

请注意，每个输入都应包含placeholder attribute is not a replacemenr for the <label> tag，请确保为<label>添加标签，即使用户不可见。

<input>

以上<label for="search">Search</label> <input id="search" placeholder="Search..." />可以被隐藏，因此它仍然适用于辅助技术：

<label>

跨浏览器解决方案

这是一个潜在的跨浏览器解决方案，我已将代码移出标记并转移到脚本标记中，然后使用类label[for=search] { position:absolute; left:-9999px; top:-9999px; }指示何时淡化文本。

jsFiddle

<强> HTML

placeholder

<强> CSS

<input name="firstName" type="text" maxlength="40" value="Enter your first name" 
    class="placeholder" id="my-input" />

<强> JS

input[type=text].placeholder {
    color: #999;
}

适用于所有`<script type="text/javascript"> var input = document.getElementById('my-input'); input.onfocus = function () { if (this.value == this.defaultValue && this.className == 'placeholder') { this.value = ''; } this.className = ''; }; input.onblur = function() { if (this.value == '') { this.className = 'placeholder'; this.value = this.defaultValue; } }; </script>`

我们可以使用input[type=text]扩展上述解决方案以适用于所有input[type=text]，循环浏览并使用document.getElementsByTagName()检查type属性。

jsFiddle

element.getAttribute()

Answer 2

这似乎使用jQuery和Modernizer库的组合工作xbrowser。

需要jQuery和Modernizer库在网站上并正确引用。

<强> HTML

<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="modernizr.js"></script>

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

}
</script>
</head>

<body>
<form>
<input name="firstName" type="text" maxlength="40" placeholder="Enter your first name">
</form>

<强> CSS

input[type=text] {
color: #000;
}

input[type=text].placeholder {
color: #666;
}

消息来源：http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

如何在<input />元素中创建标签并设置样式呢？

2 个答案:

HTML5

支持

`<input type="text" placeholder="Search..." />`

跨浏览器解决方案