输入和文本方面的褪色值

Question

我想能够做类似的事情

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

标题将自动淡出并返回为字段值，与Stackoverflow中的“搜索”不同（在顶部，它只会淡出）。

我可以想出一个JavaScript并使用 onblur 和 onfocus, ，但这会很麻烦，我希望不必要。最好是，我将在任何给定文件中仅设置每个输入和textarea的一个函数，因此我需要做的就是设置其 title.

第一个问题: ：这个名字是什么？

主要问题: ：有人有一个很好的解决方案吗？没有jQuery呢？也许只有一种方法只使用CSS3，尽管我对此表示怀疑...

Answer 1

如果您只能在较新的浏览器中工作，则可以使用 placeholder 属性 在文本字段上，为您提供一个占位符，该占位符将在您聚焦并重新出现时会消失。您可以在 潜入HTML5.

<input type="text" name="txtField" value="" placeholder="input your text" />

如果您希望它在较旧的浏览器中工作，例如，您可能必须在JavaScript中自己实现占位符。您可以找到所有的 input 和 textarea 使用的元素 document.getElementsByTagName 并添加 onfocus 和 onblur 每个人使用的处理者 DOM事件.

Answer 2

好的，感谢Brian的完美答案，这是我提出的代码。花了我足够长的时间来使它起作用：

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

只需将其放在表单的末尾，您就可以了。而且，请使用您喜欢的服务器端脚本将其从兼容的浏览器中删除。 这 占位符 属性只能在HTML5上工作.