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事件处理程序，以删除仍然显示默认值的输入值。这个（相当简单的代码）是你想要添加的东西。

另请注意，通过实际更改输入/ textarea代码的value，可能会破坏表单验证，而不准备理解它。

Answer 2

由于Phrogz jQuery版本在重载方面效果不佳，我决定根据我所知道的方式自行制作，因此，这里是：

您需要做的就是在输入中放置一个“占位符= [文本]”以显示它（此名称被选中，因为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');
                }
            });
        });

评论框textarea显示当用户关注它时消失的默认文本

2 个答案: