フィールドの長さをユーザータイプとして確認する

Question

ねえ、私はウェブ上でこの機能を見てきましたが、それを検索する方法はあまりよく分かりませんでした。良い例は、入力中に言うテキストメッセージです：

132/160 - あなたの限界に達するまで132カウンターが増加します。

私の質問は、jQueryライブラリだけではなく、JavaScriptだけで作業することは可能ですか？しかし、もし私がjQueryを使う必要があれば、おそらく良いチュートリアルを指し示すか、それより簡単かもしれません。

Answer 1

<!--This is your input box. onkeyup, call checkLen(...) --> 
<input type="text" id="myText" maxlength="200" onkeyup="checkLen(this.value)"> 

<!--This is where the counter appears --> 
<div id="counterDisplay">0 of 200</div> 


<!--Javascript Code to count text length, and update the counter--> 
<script type="text/javascript"><!-- 
    function checkLen(val){ 
     document.getElementById('counterDisplay').innerHTML = val.length + ' of 200'; 
    } 
//--></script> 

Answer 2

私はあなたの問題の正確な解決策を得ていると思います。 countChar関数は、textboxオブジェクトとdivオブジェクトを取ります。 divオブジェクトには、残っている文字の数が表示されます。

function countChar(txtBox,messageDiv) 
    { 
     try 
     { 

      count = txtBox.value.length; 
      if (count < 160) 
      { 
       charLeft = 160 - count; 
       txt = charLeft + " characters left...keep typing!!"; 
       messageDiv.innerHTML="<font color=green>" + txt + "</font>"; 
      } 
      else 
      { 
       messageDiv.innerHTML="<font color=red>Message is too long</font>"; 
      } 
      } 
      catch (e) 
      { 

      } 
    } 

<INPUT type="text" id="txtMessage" 
    onkeyup="countChar(txtMessage,messagesuccess);" 
    onkeydown="if(event.keyCode == 13){document.getElementById('btnSendTextMessage').click();}" > 

Answer 3

テキストボックスのonkeyupイベントをフックする必要があります。

次に、テキストボックスの値の長さを確認/チェックし、必要に応じてカウンターの表示を更新することができます（ユーザーにカウンターを表示したい場合）。

Answer 4

あなたが必要とするのは、テキストエリア内の文字列の長さをチェックするキーアップハンドラです。テキストエリアにmaxlength属性を指定することもできます。

文字列が160（またはwatevaの制限がある）文字を超えたことを検出すると、警告ボックスを表示して文字列を最初の160文字にトリミングすることができます。

私はコードとスプーンのフィードを提供するつもりはありません。これはウェブ上で簡単に見つけることができます。あなたがonkeyupイベントを使用する場合は

Answer 5

、私はあなたのウェブページに来て、私はあなたの入力ボックスに許容される量以上を入力したまで、私のキーを押したままにするつもりです！

使用はサポートoninputイベント、（ほとんどの主流のブラウザや、最新のIE 9プレビュー）と、古いインターネットエクスプローラーのためのonpropertychange：私はonkeyupを検出するための貧弱なイベントである理由について、より詳細に入った

var myInput = document.getElementById("myInput"); 
if ("onpropertychange" in myInput && !("oninput" in myInput)) { 
    myInput.onpropertychange = function() { 
     if (event.propertyName == "value") 
      inputChanged.call(this, event); 
    } 
} 
else 
    myInput.oninput = inputChanged; 

function inputChanged() { 
    // Check the length here, e.g. this.value.length 
} 

しばらく前に私のブログの入力 - http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript。

Answer 6

ここには簡単な解決策があります。入力/テキストフィールドのIDはinfoです：

<textarea onKeyPress='return count(this);'></textarea> 
<input type="text" id="info" value="0/160" /> 

注意を次のようにhtmlコードを持っていると仮定すると

。

次のJavaScriptの方法

function count(area){ 
    var proceed = area.value.length < 160; 
    document.getElementById('info').value = area.value.length+"/160"; 
    return proceed; 
} 

注意が必要です。テキストフィールドのidがメソッドで指定し、サイズは160です。

Answer 7

一般的な使用のために、このコード：

HTML：

<input type="text" name="noteTitle" id="noteTitle" maxlength="100" onkeyup="checkLength(this,'titleLength')" /> 
<div id="titleLength">100</div> 

JS：

//take field (fieldToCheckMax), and its counterID(titleLength) 
function checkLength(fieldToCheckMax,counterID){ 

//get the maxallowed for the input 
maxAllowed=fieldToCheckMax.getAttribute('maxlength'); 
//save the affected counter in a variable 
counterID=document.getElementById(counterID); 
//change the value based on the max allowed, to switch between green and red 
counterID.innerHTML=colorChanger(); 
//the color based checker, to decide is it red or green 
function colorChanger(){ 
    if(fieldToCheckMax.value.length < maxAllowed) { 
     counterID.style.color='green'; 
     return maxAllowed-fieldToCheckMax.value.length;} 
    else { 
    counterID.style.color='red'; 
    return maxAllowed-fieldToCheckMax.value.length; 
    } 

} 
}