textarea 占位符清除焦点

Question

我正在尝试使用 jquery 为 textarea 实现基本的占位符逻辑。但是有一个小问题我无法弄清楚如何解决它。这是html；

<textarea class="commentInput" rows="1" cols="50" title="Say something...">
    Say something...
</textarea>

而 javascript 是 ;

$('.commentInput').live('focus', function() {
    if ($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$('.commentInput').live('blur', function() {
    if ($(this).val() == '' && $(this).attr('title') != '') {
        $(this).val($(this).attr('title'));
        $(this).attr('rows', 1);
    }
});

一切正常，但有一种情况坏了。假设我在 textarea 中键入“Say something...”，然后单击 html 中的其他位置，然后当我重新回到 textarea 时，它会清除文本，因为jquery 焦点事件的值与文本区域的值和文本区域的标题匹配..

我该如何解决它或任何其他想法？ 谢谢。

Answer 1

在文本区域元素上保留一个标志isDirty，并根据这些规则在文本区域的onKeyUp事件上设置标志的值：

• 如果文本区域内有文本，那么用户一定已经输入了，所以将 isDirty 设置为 true；
• 如果文本区域为空，则将isDirty设置为false

更新：我发现了一个错误并添加了以下规则以删除该错误。当您用鼠标选择文本时，右键单击它并剪切文本；由于没有触发keyup 事件，isDirty 标志保持为真并且功能丢失。

像这样：

$('.commentInput').live('keyup', function() {
    var taObj = $(this);
    if ($(this).val() == '') {
        taObj.data('isDirty', false);
    } else {
        taObj.data('isDirty', true);
    }     
});

然后使用isDirty标志来确定是否应该修改文本：

$('.commentInput').live('focus', function() {
    var taObj= $(this);

    if (!taObj.data('isDirty') && taObj.val() == taObj.attr('title')) {
        taObj.val('');
    }
});

$('.commentInput').live('blur', function() {
    var taObj = $(this);

    // Following check is made to make sure text was not removed with a mouse action
    if(taObj.val() == '') {
        taObj.data('isDirty', false);
    }

    if (!taObj.data('isDirty') && taObj.val() == '' && taObj.attr('title') != '') {
        taObj.val(taObj.attr('title')).attr('rows', 1);
    }
});

这是一个演示此解决方案的小提琴示例：http://jsfiddle.net/melih/WXxtg/2/

Answer 2

不清楚您希望 textarea 做什么以及 javascript 对它做什么。如果 textarea 中的文本与您给 textarea 的标题相同，则第一个代码将清除 textarea。如果我理解你写的内容 - 你不应该摆脱焦点事件代码吗？