注释框文本区域显示用户聚焦时消失的默认文本

Question

大家好，我正在创建一个评论框，我想对评论框做两件我认为需要 javascript 的事情，但我还不是真正的使用 javascript 的专业人士。我希望评论框在其中显示一些文本（输入您的评论），当用户单击它时，文本消失。而且，我只想在用户点击评论框时显示提交按钮，你知道我有什么办法吗？

Answer 1

我已经使用纯 JavaScript 提交了 a page showing how to do this。我已经抽象出让文本输入/区域显示说明性文本直到聚焦的代码。

一般：

• 观察输入上的focus 和blur 事件，并根据现有值/“有用”值更改值（以及可选的类）。
• 观看评论框的focus 和blur 并更改另一个元素的CSS 类以显示和隐藏它。

如果您使用jQuery 之类的东西，这一切都会变得容易一些，因为它已经包含跨浏览器代码甚至插件来处理自描述部分。如果您愿意使用 jQuery，请告诉我，我会使用它为您提供更新的答案。

编辑：好的，我添加了jQuery version of the example。我决定不使用插件进行自我描述，因为它只有 8 行。我还更改了该特定示例以使用 title 属性来保存要显示的默认文本。

编辑 #2：基于@Meke 指出的问题，我对脚本进行了小幅更新，以处理 FireFox 重新加载页面并保留默认文本的情况，然后（以前）没有正确添加类来表明这是默认文本。

我还应该注意，我的两个示例都没有包含用于表单的 submit 事件处理程序，以删除碰巧仍显示默认值的输入的值。这个（相当简单的代码）是您想要添加的。

另请注意，通过像这样实际更改输入/文本区域代码的value 可能会破坏不准备理解它的表单验证。

Answer 2

由于 Phrogz jQuery 版本不能很好地重新加载，我决定根据我所知道的制作我自己的版本，因此，这里是：

您需要做的就是在您的输入中放置一个“placeholder=[text]”以使其显示（选择此名称是因为 HTML5 使用“placeholder”来实现相同的功能。

    $('input:text').each(function(){
            $(this).val($(this).attr('placeholder')).css('color','#900');
            $(this).focus(function(){
                // If value is same as 'placeholder', clear field
                if($(this).val() === $(this).attr('placeholder')){
                    $(this).val('').css('color','#000');
                } else { // Else select the whole text (one less click)
                    $(this).select();
                }
            });
            $(this).blur(function(){
                // On blur, if empty field, put placeholder back
                if ($(this).val() === ''){
                    $(this).val($(this).attr('placeholder')).css('color','#900');
                }
            });
        });