jquery - 如果值长度 < n，则使用 jquery 恢复初始 textarea 值

Question

我是 jquery 和 javascript 编码的新手，我尝试编写一个函数，如果其值的长度小于“n”个字符，则在 textarea 上恢复初始值。它不起作用。你能解释一下怎么做吗？

这是代码：

$("textarea").focus(function() {
    var text = $(this).val();
    $(this).val('');
    $(this).blur(function() {
        if($(this).val().lenght<20)
        {
            $(this).val(text);
        }
    });
});

Answer 1

虽然效率不高，但这可以完成工作：

var text='';

$("textarea").focus(function() {
    text = $(this).val();
});

$("textarea").blur(function() {
    if($(this).val().length<20)
    {
        $(this).val(text);
    }
});

Answer 2

lenght应该是length。

一旦你解决了这个问题，你会发现你blur每次都重新附加事件但从不删除它，这意味着你将附加大量的侦听器。尝试one或更通用的blur只附加一次。

Answer 3

您需要创建一个具有本地范围的闭包并传入您的变量，以便它在该范围内是本地的：

$("textarea").focus(function() {
    var text = $(this).val();
    $(this).val('');
    (function(initialText) {
        $(this).blur(function() {
            if($(this).val().length < 20)
            {
                $(this).val(initialText);
            }
        });
    })(text);
});

如果您不使用闭包创建这样的本地范围，那么您传递给的事件处理程序.blur()将不知道是什么text，因为它不在此函数的范围内。

阅读更多关于 js 闭包的信息，例如：http: //jibbering.com/faq/notes/closures/

Answer 4

对于这种情况，您可以使用.data函数。见下文，

$("textarea").one('focus', function() {      //will be executed once
    $(this).data('init_val', $(this).val()); //set data with initial value
    $(this).val('');                         //clear the textarea
}).blur(function() {
    if($(this).val().length<20) {            //Check if entered text val is < 20
       $(this).val($(this).data('init_val'));//If yes, update with initial val
    }
});