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

【问题标题】：Restore initial textarea value with jquery if value length < n如果值长度 < n，则使用 jquery 恢复初始 textarea 值
【发布时间】：2012-04-13 20:03:09
【问题描述】：

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

代码如下：

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

【问题讨论】：

标签： jquery focus textarea blur

【解决方案1】：

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

var text='';

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

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

【讨论】：

如果我一开始没有定义text 值，那么它会导致未定义的错误。我的选择是，模糊必须在我们离开焦点后发生，然后在那里定义 text。

【解决方案2】：

lenght 应该是length。

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

【讨论】：

【解决方案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/

【讨论】：

这实际上并没有改变任何东西。 text 变量在函数内不会改变。
@JamesMontagne 我不太确定你的意思。你测试过吗？
模糊代码已经可以访问text 变量。如果您修正了length 中的错字，原始代码大致“有效”。
我明白了。但为什么要粗略呢？
它每次都重新绑定blur，这意味着在对代码进行n次调用后将附加n个监听器。它有效，但很糟糕。

【解决方案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
    }
});

【讨论】：

我同意，但您仍然需要修正 length 的错字。
@JamesMontagne 已注意到并修复.. 谢谢