Question

所以我在textarea上有一个.live（）点击事件，允许用户发表评论。我还有这个Jquery函数来清除“发表评论...”的默认文本，并取消绑定事件，如果用户再次点击textarea，他们的评论不会被删除。

这是功能。

$('#comment-textarea').live('click', function(e) {
        $(this).text('');
        $(this).unbind(e);
});

但是，当用户提交通知时，即使清除了默认文本并输入了自己的文本，也会提交默认文本。我认为这是造成这种情况的非绑定事件，但我也是这样写的。

$('#comment-textarea').live('click', function(e) {
        if($(this).text() == 'Leave a comment') {
            $(this).text('');
        }                            
});

但它仍然提交了初始文本。有没有人遇到过这个？

*** EDIT

因此100％确保jquery事件不绑定到不在屏幕视图中的元素。如果我在div中向下滚动，div下方和视图之外的任何内容都不会做任何事情。

Answer 1

因为您应该使用val()，而不是text()。 <textarea>是一个HTML表单控件，对于表单控件，您可以使用val()函数获取其当前值，或val(x)函数来设置其当前值。

$('#comment-textarea').live('click', function(e) {
        $(this).val('');
        $(this).unbind(e);
});

Answer 2

使用.val而不是.text。另外.one是一次更好的解决方案：

$('#comment-textarea').one('focus', function(e) {
    $(this).val('');
});

另外，请看一下HTML5中的placeholder属性（它在没有JS的现代浏览器中实现了同样的功能）：

http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute

Answer 3

将所有$(this).text('');替换为$(this).val('');

Answer 4

我会使用HTML5 placeholder加Modernizr和polyfill来支持旧浏览器并编写更多语义代码。

<textarea placeholder="Leave a comment..."></textarea>

就是这样！

清除文本的Jquery .focus（）保留textarea中的默认文本

4 个答案: