1

我希望能够做类似的事情

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

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

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

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

主要问题：有人有好的解决方案吗？没有jquery怎么办？也许有一种方法可以只使用 CSS3，尽管我对此表示怀疑......

4

2 回答 2

3

如果您对它只在较新的浏览器中工作没问题，您可以使用文本字段上的placeholder属性来提供一个占位符，当您聚焦时会消失并在模糊时重新出现。您可以在Dive Into HTML5中找到更多信息。

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

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

于 2010-08-25T19:52:53.233 回答
0

好的，感谢布赖恩的完美回答，这是我想出的代码。我花了足够长的时间让它工作：

<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 的浏览器中删除它。placeholder属性只适用于 HTML5 。

于 2010-08-25T21:25:59.917 回答