- ベストアンサー
リアルタイムに入力内容を取得・表示する処理
- 特定のキーワードをカウントする処理にリアルタイムな表示を追加する方法について教えてください。
- テキストエリアに入力された内容から特定のキーワードをカウントし、その値をリアルタイムに表示する方法を教えてください。
- キーワードの出現回数をカウントし、その値を動的に表示する方法について教えてください。
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (2)
これはいかがでしょうか (<texarea>になっているのでそこだけ変更します。<tex[t]area>) (また,「(<div id="keyword-counter"></div>をここに追加)」は,そのまま表示されてしまうためコメントアウトしました。) <form id="post" name="post" method="post" action="post.php"> <textarea id="text" class="text-edit" name="text"></textarea> <input id="submit" name="submit" type="submit"> </form> <!--(<div id="keyword-counter"></div>をここに追加)--> <div id="word-counter">文字数:</div> <script type="text/javascript"> //初期作業 //ノード追加 tmp = document.createElement("div"); tmp.id = "keyword-counter"; document.body.insertBefore(tmp, document.getElementById("word-counter")); /*onkeyupはキーが上がると発生するので文字数を正確に取得できる。しかしながら、キーを押しっぱなしにすると取得できない。 そのためonkeydownにもできるけど、文字数を正確に取得できない*/ onkeyup = (function KeywordCounter() { var input_text = document.getElementById("text").value; var word = input_text.split('キーワード').length - 1; document.getElementById("keyword-counter").innerHTML = input_text; document.getElementById("word-counter").innerHTML = "文字数:" + input_text.length + "<br />word =" + word; }); </script>
お礼
確認環境が原因の様でした。 ありがとうございました。
補足
回答ありがとうございます。 コードを試してみましたが、<div id="keyword-counter">が挿入されず、文字列も表示出来ませんでした。 また、こちらでも頂いたコードを元に色々試してみたりもしているのですが、未だに良い結果が得られません。 少し混乱してきました…。
JQueryは苦手なので,普通のJsならこれでいけるとおもいます。 <form id="post" name="post" method="post" action="post.php"> <textarea id="text" class="text-edit" name="text" rows="4" cols="40" onkeyup="KeywordCounter()"></textarea> <input id="submit" name="submit" type="submit"> </form> <div id="keyword-counter"></div> <div id="word-counter">文字数:</div> <script type="text/javascript"> function KeywordCounter(){ var input_text = document.getElementById("text").value; var word = input_text.split('キーワード').length -1; document.getElementById("keyword-counter").innerHTML=input_text; document.getElementById("word-counter").innerHTML="文字数:"+input_text.length+"<br />word ="+word; } </script>
お礼
この度はありがとうございました。
補足
回答ありがとうございます。 私の言葉足らずで申し訳ないのですが、htmlの方には変更を加えずにJavascript(またはjQuery)だけで対応したいのです。
お礼
こちらでも確認できました。 丁寧な対応に心から感謝致します。