HTML5のMAXLENGTHは、我々はその後、例えばでき</p> <p>

Question

<textarea maxlength="5" rows="3" name="text"></textarea> 

https://jsfiddle.net/187117qq/カウント「12」と入力してEnterキーを押し、「34」と入力すると、さらにタイプすることはできません。

しかし、我々はこのコンテンツでフォームを送信すると、サーバーの意志に要求

text=12%0D%0A34 

が含まれていることが6つの文字である「12 \ rをするの\ N34」、と私たちは期待しているので、我々は、サーバー側での検証に失敗します5文字以内

これはどうしてですか？

これを修正する方法はありますか？クライアントとサーバー側で同じ検証を行うには？

Answer 1

ここでは、2つの可能な解決策を見つけることができ、TEXTAREAで、同じ時間で文字の数を制限するための最初のものを使用JSが入力改行をユーザーに許可します。

<form action="test" method="post"> 
 
     <span>In this example the user CAN input a NEW LINE</span> 
 
     <textarea data-maxlength = "5" rows="3" oninput="validateMaxlength()" name="text"></textarea> 
 
     <span>In this example the user CANNOT input a NEW LINE. NO JS IS REQUIRED</span> 
 
     <button type="submit">SEND</button> 
 
    \t <script> 
 
    \t \t function validateMaxlength(e){ 
 
    \t \t var MAX_LENGTH = event.target.dataset.maxlength; 
 
         var currentLength = event.target.value.length; 
 
    \t \t var length = event.target.value.replace(/\n/g,'').length; 
 
    \t \t \t \t 
 
    \t \t if(length>MAX_LENGTH){ 
 
    \t \t  event.target.value = event.target.value.substr(0,currentLength-1); \t \t } 
 
    \t \t } 
 
    \t </script> 
 
    </form>

秒1は、任意のJSを使用しませんが、属性ラップに依存している=「ソフト」ユーザーはEnterキーを押して改行を入力できなくなります。

<form action="test" method="post"> 
 
     <span>In this example the user CANNOT input a NEW LINE. NO JS IS REQUIRED</span> 
 
    <textarea maxlength = "5" rows="3" wrap="soft"name="text"></textarea> 
 
     <button type="submit">SEND</button> 
 
</form>

ノートのカップル：

1. MAXLENGTHが5つの文字のように少数である場合、あなたはあなたのユーザーのための場合は、入力されたテキスト
2. を使用する方がよいかもしれません新しい行を入力できるようにする必要はありません。私の2番目の例は、あなたにとってより適しているはずです
3. 何らかの理由でユーザーがmaxlength 5文字を入力できるようにするには、同時に新しい行を入力する必要があります。サーバーの検証によって最大5文字が許可されている場合は修正できません。このシナリオでは、サーバーのコード

を提供し、誰と話した方がよいかもしれません私はあなたがkeydownを使用し、event.preventDefaultを（使用することができ、同様の問題を発見した）が、onipunt良いとして動作するようには見えません。 より良い解決策が見つかるかどうかを確認してください

Answer 2

検証の前にサーバー側で「\ r」を削除することをお勧めします。