评论框文本区域显示默认文本，当用户聚焦它时该文本会消失

Question

嘿伙计们，我正在创建一个评论框，我想对评论框做两件事，我认为这需要 javascript，但我还不是真正使用 javascript 的专业人士。我希望评论框显示一些文本（输入您的评论），当用户单击它时，文本就会消失。另外，我想仅在用户单击评论框时显示提交按钮，你知道我可以通过什么方法来做到这一点吗？

Answer 1

我已经建立了一个页面，展示了如何使用纯 JavaScript 执行此操作。我已经抽象了让文本输入/区域显示指导文本直到聚焦的代码。

一般来说：

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

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

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

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

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

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

Answer 2

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

您需要做的就是在输入中放置一个“placeholder=[text]”以获取它会显示出来（选择这个名称是因为 HTML5 使用“占位符”来实现相同的功能。

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