需要有关自定义文本区域最大长度功能的建议

Need suggestion regarding customizing textarea max length function

本文关键字：功能 自定义 区域 文本      更新时间：2023-09-26

>我正在使用一个限制文本区域长度的函数。虽然函数表现良好，但我想问一下我是否以正确的方式调用函数？

在这里

<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(.keypress(function(event((。如何优化此功能？还是我做得对？

谢谢

每次按下某个键时，您都会附加一个新的按键事件侦听器。这是没有道理的。您需要直接在属性中指定它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)" />

如果你真的需要通过jQuery keyup()函数附加它，那么你必须自己在函数中指定限制。

例如

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

跟

$("textarea.limit").keyup(function() {
    var $textarea = $(this);
    var limit = 400;
    if ($textarea.val().length > limit) {
        $textarea.val($textarea.val().substr(0, limit));
    }
});

(您在$(document).ready(function() {...})或$(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的限制与您在服务器端<f:validateLength>验证器中的限制不匹配。

相关文章：