需要关于定制textarea最大长度函数的建议

Question

我正在使用限制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）.keypress（功能（事件）。我该如何优化这个功能？或者我做对了吗？

谢谢

Answer 1

您每次按下某个键时都会附加一个新的按键事件侦听器。这没有意义。你需要或者直接在onkeypress属性中指定它，或在文档准备好之后通过jQuery手段附加它。进一步分配到val()函数是没有意义的，你需要传递新的值作为它的参数。这可能不可能“表现良好”。最后，我还建议使用keyup而不是keypress，以便仅在之后调用函数，textarea的值才会更新，这会导致限制函数更加健全。这样你也不需要检查不可打印的字符范围。

所有的一切，它可以仅仅是这样的：

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()功能，将其固定，那么你必须自己指定函数的极限。

E.g.

<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>的极限。