Javascript 需要关于自定义textarea max length函数的建议吗

我正在使用一个限制textArea长度的函数。虽然函数执行得很好，但我想问一下，我调用函数的方式是否正确

给你

<h:inputTextarea id="questionInputTextArea"
                 value="#{faqAddUpdate.question}"
                 cols="50"
                 rows="3"
                 disabled="#{faqAddUpdate.buttonState}"
                 onkeypress="limitTextArea(this, 400)"
                 style="overflow: auto;">

   <f:validateLength maximum="200" />

</h:inputTextarea>

下面是函数

function limitTextArea(element, limit) {

    var $textArea = $(element);     //casting to jQuery so we can use jQuery functions on it
    ($textArea).keypress(function(event){

        if (event.which < 0x20) {

            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing

        }

        if ($textArea.val().length == limit) {
            event.preventDefault();
        } else if ($textArea.val().length > limit) {

            // Maximum exceeded
            $textArea.val() = $textArea.val().substr(0, limit);
        }

    }); //end of keypress

} //end of function()

让我困惑的是，我在jsf代码中使用了onkeypress，在函数中我还说$textArea.keypressfunctionevent。如何优化此功能？还是我做得对

---

谢谢

每次按键时，您都会附加一个新的按键事件侦听器。这毫无意义。您需要直接在onkeypress属性中指定它，或者在文档准备就绪后通过jQuery方式附加它。此外，赋值给val函数没有意义，您需要将新值作为参数传递。这不可能表现得很好。最后，我还建议使用keyup而不是keypress，这样该函数只有在textarea的值被更新后才被调用，这将导致limit函数的行为更加正常。这样，您也不需要检查不可打印的字符范围

总而言之，它可以是这样的：

function limitTextArea(element, limit) {
    var $textArea = $(element);

    if ($textArea.val().length > limit) {
        $textArea.val($textArea.val().substr(0, limit));
    }
} 

注册为

<h:inputTextarea ... onkeyup="limitTextArea(this, 400)" />

与

在$document.readyfunction{…}或$function{…}期间执行

或者，您可以将限制指定为类名的一部分，并相应地提取它：

<h:inputTextarea ... styleClass="limit_400" />

用这样的东西

$("textarea[class*=limit_]").each(function(i, textarea) {
    var classNames = textarea.className.split(' ');
    var limit = 0;

    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].indexOf("limit_") == 0) {
            limit = parseInt(classNames[i].split("_")[1]);
            break;
        }
    }

    if (limit) {
        $(textarea).keyup(function() {
            var $textarea = $(this);

            if ($textarea.val().length > limit) {
                $textarea.val($textarea.val().substr(0, limit));
            }
        });
    }
});

---

顺便说一下，400的限制与您在服务器端验证程序中的限制不匹配。

HHmm您能告诉我一件事吗。如果我想在函数中使用事件对象，我该如何使用它？就像我只是把元素和限制传递给我的函数一样。我还可以像onkeyup=limitTextAreathis，400，event那样将事件对象传递给我的函数。谢谢，实际上我使用了event.这是因为在达到最大限制后，如果我按下任何键，您会在文本区域感觉到一些不稳定的行为。比如，textarea试图进入顶部，或者试图阻止您写作。这是滚动条轻微晃动。这就是为什么我使用event.which，这样用户在达到最大限制时就不能按键，这也是使用keypress的原因。如果我使用keyup事件，那么在达到最大限制后按下该键时，您会感觉到轻微的抖动行为。是的，它不匹配：我会纠正它，因为我正在测试并专注于函数，所以我保持原样。事实上，我是通过在这个论坛上阅读你的一个答案来使用这种方法的；。谢谢：

<h:inputTextarea ... styleClass="limit_400" />

$("textarea[class*=limit_]").each(function(i, textarea) {
    var classNames = textarea.className.split(' ');
    var limit = 0;

    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].indexOf("limit_") == 0) {
            limit = parseInt(classNames[i].split("_")[1]);
            break;
        }
    }

    if (limit) {
        $(textarea).keyup(function() {
            var $textarea = $(this);

            if ($textarea.val().length > limit) {
                $textarea.val($textarea.val().substr(0, limit));
            }
        });
    }
});