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，然后点击到html中的其他地方，然后当我重新回到textarea时，它很清楚文本因为jquery焦点事件的匹配textarea的值和文本区域的标题..

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

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。如果我理解你写的内容 - 你不应该摆脱焦点事件代码吗？

textarea占位符明确焦点

2 个答案: