Question

我希望能够做一些像

这样的事情

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

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

我可以想出一个javascript并使用onblur和onfocus，但这会很麻烦，我希望不必要。最好，我在任何给定文件中为每个INPUT和TEXTAREA设置一个函数，所以我需要做的就是设置它的title。

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

主要问题：任何人都有一个很好的解决方案？没有jquery怎么样？也许有一种方法只用CSS3来做，虽然我怀疑它......

Answer 1

如果您只使用较新的浏览器，则可以使用文本字段上的placeholder attribute来提供占位符，当您进行对焦时该占位符会消失并在模糊时重新出现。您可以在Dive Into HTML5中找到更多信息。

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

如果您希望它在旧版浏览器中运行，您可能必须自己实现占位符，例如JavaScript。您可以使用document.getElementsByTagName找到所有input和textarea元素，并使用DOM events为每个元素添加onfocus和onblur个处理程序。

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兼容的浏览器中删除它。 占位符属性仅适用于HTML5 。

输入和textarea衰落值

2 个答案: