textarea jQuery上的默认文本？

Question

我有一个textarea,我想在页面加载时显示一些默认文本.单击textarea后,我希望文本消失,如果用户在textarea中单击并且没有输入任何内容然后单击textarea,则默认文本将再次显示.

我已经搜索过谷歌并且在这里,但我似乎只能找到与文本框相关的教程而不是 textareas,而且我已经在textarea上使用了一个类,所以不能依赖于类来工作.

有没有人有一些简单的jQuery代码,他们想与我分享,以做我想要的上面？

Answer 1

演示: http ://jsfiddle.net/marcuswhybrow/eJP9C/2/

重要的是要记住用户键入默认值的边缘情况.我的解决方案通过给每个避免了这种textarea的edited使用jQuery的标志data()方法.

HTML

textarea像往常一样定义默认值:

<textarea>This is the default text</textarea>

jQuery

$('textarea').each(function() {
    // Stores the default value for each textarea within each textarea
    $.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});

演示: http ://jsfiddle.net/marcuswhybrow/eJP9C/2/