複数行テキスト領域の入力文字を検証するためのJavascript

私は42文字を受け入れる複数行のテキスト領域を持っており、ユーザーが制限を超えて送信ボタンをクリックすると '制限を超過しました'という警告メッセージが表示されます** * '文字。以下は同じことを行うコードです。複数行テキスト領域の入力文字を検証するためのJavascript

<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
     function ok(maxchars) { 
      if (document.ourform.box.value.length > maxchars) { 
       alert('Too much data in the text box! Please remove ' + 
         (document.ourform.box.value.length - maxchars) + ' characters'); 
       return false; 
      } 
      else 
       return true; 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl" 
       method="post" name="ourform" onsubmit="return ok(42)"> 
      Please enter data, at most 42 characters:<br/> 
      <textarea name="box" rows="5" cols="30"> 
      </textarea> 
      <br/><input type="submit"/> 
     </form> 
    </div> 
</body> 
</html>

しかし、私の問題は、私が代わりに送信ボタンをクリックするのテキストボックス領域からの制御をデフォーカスたら、私は同じ警告メッセージを取得する必要があります。それを達成するために私を助けてください...！ありがとうございます...

追加要件：アラートメッセージを取得して[OK]ボタンをクリックした後、余分な文字を削除する必要があります。助けてください..

出典

2016-10-19 Harshitha Kumar

jqueryを使用しますか？ – Sasikumar

はこれを試してみてくださいjQueryの

$(function(){ 
 
\t $("#box").keypress(function(){ 
 
    \t if($(this).val().trim().length > $(this).data("limit") - 1) { 
 
\t \t \t alert("You have reached the limit"); 
 
    \t \t return false; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" name="ourform"> 
 
    Please enter data, at most 42 characters:<br/> 
 
    <textarea name="box" rows="5" cols="30" data-limit="10" id="box"></textarea> 
 
    <br/><input type="submit"/> 
 
</form>

を使用して簡単なソリューションです。

出典

2016-10-19 12:59:06 Sasikumar

でお手伝いしてください。 –

あなたの追加要件は何ですか？ – Sasikumar

追加要件：アラートメッセージを取得して[OK]ボタンをクリックした後、余分な文字を削除する必要があります。助けてください。 –

これをテキストエリアにバインドするには、onchangeまたはkeyupイベントを使用する必要があります。

まず、テキストエリアにIDを追加します。次に、イベントリスナーをバインドして、関数を呼び出します。

document.getElementById("textAreaBox").addEventListener("keyup", ok(42));

また、onpropertychangeイベントをHTML形式で使用することもできます。

<textarea name="box" rows="5" cols="30" onpropertychange="ok(42)"> 
</textarea>

出典

2016-10-19 12:37:24 TheValyreanGroup

代替ソリューションが機能していません。 –

どこにdocument.getElementById（ "textAreaBox"）を追加しますか？addEventListener（ "keyup"、ok（42））;私のコードの行??? –

'ok（）'関数の終了括弧の直後です。 – TheValyreanGroup

"OK（42）" =このonBlurイベントを追加したり、onkeyupの= "OK（42）" ウルテキストエリア

<textarea name="box" rows="5" cols="30" onblur="ok(42)"> 
     </textarea> 

    OR 

    <textarea name="box" rows="5" cols="30" onkeyup="ok(42)"> 
     </textarea>

出典

2016-10-19 12:49:48

追加条件 –

を内側にあなたがテキストエリアのID /クラスを与えることができ、簡単な使用して行きます JqueryEvents - 関数をトリガするためのOnblurまたはFocusOutイベント。 >https://api.jquery.com/blur/

Javascriptのblurイベント - - ここ>http://www.w3schools.com/jsref/event_onblur.asp

出典

2016-10-19 12:50:39 Raghurocks

テキスト領域に 'maxlength'属性を付けることができます。ここに例があります。これは機能します。

<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl" 
    method="post" name="ourform" onsubmit="return ok(42)"> 
    Please enter data, at most 42 characters:<br /> 
    <textarea name="box" rows="5" cols="30" maxlength="42"> 
     </textarea> 
    <br /> 
    <input type="submit" /> 
</form>

出典

2016-10-19 13:31:41

複数行テキスト領域の入力文字を検証するためのJavascript

答えて

関連する問題