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（function（event））この関数を最適化するにはどうすればよいですか？それとも、私は正しくやっていますか？

ありがとう

Answer 1

キーを押すたびに新しいキー押しイベントリスナーが接続されます。これは意味がありません。 onkeypressアトリビュートをまたはに直接指定するか、ドキュメントの準備ができたらjQueryを使用してください。さらにval()関数への代入は意味をなさないので、代わりに新しい値を引数として渡す必要があります。これは不可能なことでは「うまくいく」ことができます。最後に、keypressの代わりにkeyupを使用して、関数が呼び出されるようにすると、の後にが呼び出され、textareaの値が更新され、limit関数が正常に動作します。この方法では、印刷できない文字の範囲を確認する必要もありません。

すべてのすべてで、それだけで次のようになります。あなたが本当にjQueryのkeyup()機能によってそれを添付する必要がある場合

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)" /> 

---

として登録しようとします、関数の制限を自分で指定する必要があります。

など。

：

$("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" /> 

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

0ところで、この

$("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>バリデータであってきた制限に一致していません。