ホームページ > 記事 > ウェブフロントエンド > Textareaの単語数をカウントし、まだ入力可能な文字を入力する機能をJavaScriptで実装する
テキストボックスにテキストを入力すると、入力された文字が自動的にカウントされ、ユーザーが入力できる文字が表示されます。実際には、次の例で説明します。マイクロブログ Web サイトは優れたユーザー エクスペリエンスを備えています。つまり、テキスト ボックスにテキストを入力すると、入力された文字数が自動的にカウントされ、ユーザーが入力できる文字が限定されて表示されます。 140 文字、この方法 小さなヒントがユーザー エクスペリエンスを大幅に向上させます。
このテクノロジーが実装されたらどうなるでしょうか? 実際にテストした結果、実装はわずか数行のコードで完了できることがわかりました。 Twitter などのミニブログの内容と完全に一致しています。
使用方法は、まずスパンを追加して残りの単語数を表示し、次にonkeydownと
onkeyup
イベントをTextareaに追加し、別のJavaScript関数を呼び出します。関数呼び出しのパラメータは次のとおりです。 JavaScript で innerHTML を使用して、計算された残りの単語数を返します。 コア Javascript コード:
コードは次のとおりです:
<span style="font-size:18px;"><script language="javascript"> function countChar(textareaName,spanName) { document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length; } </script> 可以输入<span id="counter">140</span>字<br/> <textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' onkeyup='countChar("status","counter");'></textarea></span>
以上がTextareaの単語数をカウントし、まだ入力可能な文字を入力する機能をJavaScriptで実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。