ホームページ  >  記事  >  ウェブフロントエンド  >  Textareaの単語数をカウントし、まだ入力可能な文字を入力する機能をJavaScriptで実装する

Textareaの単語数をカウントし、まだ入力可能な文字を入力する機能をJavaScriptで実装する

怪我咯
怪我咯オリジナル
2017-07-04 15:07:301310ブラウズ

テキストボックスにテキストを入力すると、入力された文字が自動的にカウントされ、ユーザーが入力できる文字が表示されます。実際には、次の例で説明します。マイクロブログ 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=&#39;countChar("status","counter");&#39; 
onkeyup=&#39;countChar("status","counter");&#39;></textarea></span>

以上がTextareaの単語数をカウントし、まだ入力可能な文字を入力する機能をJavaScriptで実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。