リアルタイムに入力内容を取得・表示する処理
- 特定のキーワードをカウントする処理にリアルタイムな表示を追加する方法について教えてください。
- テキストエリアに入力された内容から特定のキーワードをカウントし、その値をリアルタイムに表示する方法を教えてください。
- キーワードの出現回数をカウントし、その値を動的に表示する方法について教えてください。
- ベストアンサー
入力内容をリアルタイムに取得・表示する処理
次のような内容でテキストエリアに入力された特定のキーワードをカウントしているのですが、カウントの値をリアルタイムに取得・表示にはどのような処理を加えたら良いのでしょうか。 <form id="post" name="post" method="post" action="post.php"> <texarea 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"> jQuery( function($) { function KeywordCounter() { var input_text = document.post.content.value; var word = input_text.split('キーワード').length -1; } $('#word-counter') .before('<div id="keyword-counter"></div>').bind('keyup', KeywordCounter); KeywordCounter(); }); </script>
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ブラウザは何を使っていらっしゃるでしょうか。 IE,Chromeで動作確認しました。 IEはローカルのscriptはブロックされるので、 私のサーバーに置きます。 確認ができたら返信をください。 http://pro.mnas.0am.jp/TMP/q8780599.html //HTML完全(head内は省略) <HTML> <head></head> <body> <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> </body> </HTML>
その他の回答 (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)だけで対応したいのです。
関連するQ&A
- 同じ内容のスクリプトを同一ページに実装
同じボタンを特定回数連続で自動クリックするjavascriptを組みました。 (スクリプト名 loadHello) 下記で問題なく動作しました。 <script type="text/javascript"> //Searchボタンを0.5秒ごとに12回クリック window.onload = function loadHello(){ var counter = 1; var timerId = setInterval(function(){ document.getElementById('search_button').click(); if(counter >= 12){ clearInterval(timerId); } counter++; }, 500); } </script> <form id="searchform" name="searchform" method="POST"> <input type="hidden" name="play" id="play" value=""> <a id="search_button">search_button</a> </form> 次に、同じページに同様の働きをするloadHello2を組みました。 <script type="text/javascript"> //Searchボタンを0.5秒ごとに12回クリック window.onload = function loadHello2(){ var counter2 = 1; var timerId2 = setInterval(function(){ document.getElementById('search_button2').click(); if(counter2 >= 12){ clearInterval(timerId2); } counter2++; }, 500); } </script> <form id="searchform2" name="searchform2" method="POST"> <input type="hidden" name="play" id="play" value=""> <a id="search_button2">search_button2</a> </form> 上記のloadHelloとloadHello2を同じページに記載すると、なぜかloadHello2だけしか動作しません。 単純なミスと思いますが、ご指導いただきたくお願いいたします。
- ベストアンサー
- JavaScript
- formのボタンをsubmitしたときにアラート
javascript で、formのボタンをsubmitしたときに アラートが出るようにしたいと思います。 下記のように作ってみましたが、うまく動きません。 どのようにすれば動くでしょうか? ご教示いただきたくお願いいたします。 <script type="text/javascript"> function(){ $('form1').submit(function(){ $.ajax({ type: 'POST', data: postData, url: 'buy.php', success: function(data){alert("購入できました");} error: function(){alert('購入できませんでした。再度お試しください');} }); return false; }); } </script> <form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="name" value="高橋" /> <input type="submit" value="Save"> <form/>
- ベストアンサー
- JavaScript
- javascriptでinput属性の入力
複数のボタンがあります。 それぞれのボタンによって、value値を変えたいと考えています。 通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。 そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。 そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。 どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>
- ベストアンサー
- JavaScript
- submit()の動作について。
<style type="text/css"> .p1{display=none;} </style> <script language="JavaScript"> function BtnNone(){ document.btn1.style.display = "none"; document.msg1.style.display = "inline"; document.frm1.submit(); } </script> </head> <form name="frm1" method="post" action="send.cgi"> <div id="btn1"> <input type="text" name="a"> <input type="submit" name="submit" value="SEND" onClick="BtnNone()"> <input type="submit" name="submit" value="BACK"> </div> <p class="p1" id="msg1">送信中</p> </form> ------------------------- 主旨が変わったので新しく質問します。 こういうソースで"SEND"をクリックするとボタンが消えて「送信中」のメッセージが表れるのですが、secd.cgiがsubmitされません。 どこが間違っているのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ｊQuery UIについて
今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。 このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで 以下のようなコードを書いてみました。 この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するには どうしたらよいのでしょうか。 単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------
- 締切済み
- JavaScript
- javascript form送信後の動作
以下のスクリプトでiframeにデータは送信できているんですが、<input type="text">に入力したテキストが残ってしまいます。どのように記述したらうまくいくでしょうか？ <script type="text/javascript"> function send(){ var frm=document.txt_submit; frm.submit(); frm.reset(); } </script> <form name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" name="ctxt" size="20" value=""> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- javascript ボタンによる表示について
javascriptのボタンによる表示について質問があります． 質問内容と致しましては，ボタンを表示した時に隠れている問題文を出現させるソースを作っているのですが，うまくプログラムが動作しません． おそらく，window.onloadの使い方が理解しきれてないからだとは思いますが， よくわかりませんので質問させていただきました． 回答の方よろしくお願いします． 以下ソースです． <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function hideForm1(){ document.getElementById("formblock1").style.display = "none"; } function showForm1() { document.getElementById("formblock1").style.display = "block"; } window.onload = function(){ hideForm1(); }; function hideForm2(){ document.getElementById("formblock2").style.display = "none"; } function showForm2() { document.getElementById("formblock2").style.display = "block"; } window.onload = function(){ hideForm2(); }; function hideForm3(){ document.getElementById("formblock3").style.display = "none"; } function showForm3() { document.getElementById("formblock3").style.display = "block"; } window.onload = function(){ hideForm3(); }; function send(){ function chk1(frm, names){ var r = true; for(var i = 0; i < names.length; i++) r &= (frm.elements[names[i]].value !=""); return r; } var r = true; r &= chk1(document.forms['nform'],['kaitouran11','kaitouran12','kaitouran13','kaitouran14','kaitouran21','kaitouran22','kaitouran23','kaitouran24','kaitouran31','kaitouran32','kaitouran33','kaitouran34']); if(r){ document.forms['nform'].submit(); }else{ alert('解答欄に空白があります'); } } </script> </head> <body> <form> <input type="button" value="問題1" onclick="showForm1(); this.disabled = true;"/> </form> <form> <input type="button" value="問題2" onclick="showForm2(); this.disabled = true;"/> </form> <form> <input type="button" value="問題3" onclick="showForm3(); this.disabled = true;"/> </form> <form name="nform" method="post" action="./kaitou1.php" enctype="multipart/form-data"> <div id="formblock1"> <p> 問題1</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran11" size="14"> (2)<input type="text" name="kaitouran12" size="14"> (3)<input type="text" name="kaitouran13" size="14"> (4)<input type="text" name="kaitouran14" size="14"> </p> </div> <div id="formblock2"> <p> 問題2</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran21" size="14"> (2)<input type="text" name="kaitouran22" size="14"> (3)<input type="text" name="kaitouran23" size="14"> (4)<input type="text" name="kaitouran24" size="14"> </p> </div> <div id="formblock3"> <p> 問題3</p> <p>問題文</p> <p> (1)<input type="text" name="kaitouran31" size="14"> (2)<input type="text" name="kaitouran32" size="14"> (3)<input type="text" name="kaitouran33" size="14"> (4)<input type="text" name="kaitouran34" size="14"> </p> </div> </form> <input type="button" value="送信" onclick="send()"> </body> </html>
- ベストアンサー
- JavaScript
- ファイル選択と同時にアップロード HTML+JS
HTMLとJava Scriptのことを質問させてください <form>タグからファイルを選択すると同時をアップロードしたいと思っています。 複数の「ファイルを選択ボタン」を設置し、それぞれ"001.jpg"、"002.jpg"など指定の名前でアップロードしたいです。 下記のようにいくつかの<form>タグを設置し、javascriptでコントロールできるかと思いケース1のように書いた場合はうまくいったのですが、ケース2のように複数並べて記述した場合、動かなくなり困っております。 どなたか教えていただけないでしょうか？ よろしくお願いいたします ケース1） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script> ケース2） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; var form = document.getElementById("upload_file2"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script>
- ベストアンサー
- JavaScript
- フォームのリアルタイム入力チェック
現在、下記ソース（他のサイト様を参考）に送信時に入力チェックを行い、 エラーがあれば、送信されないようものを使っております。 送信時に加え、入力時に入力項目のみをリアルタイムに入力判定を行いたいです、 入力時にリアルタイムに行うためには、どのようにすればいいのでしょうか。 エラーがあれば、下記のように隠しているメッセージなどが表示され、 問題がなければ、表示させないまたは、表示されているエラーメッセージを隠す。 で構いません。 よろしくお願い致します。 ・htmlファイル <div id="notice-form" style="display: none; color: red;"> 【必須項目に未入力があります】</div> <form name="mailform" method="post" action="index.php" onsubmit="return formCheck()"> <!--テキスト--> <div id="text1" style="display: none; color: red;"> 【text1入力して下さい】</div> <input type="text" name="text1" /><br /> <div id="text2" style="display: none; color: red;"> 【text2入力して下さい】</div> <input type="text" name="text2" /><br /> <div id="text3" style="display: none; color: red;"> 【text3入力して下さい】</div> <input type="text" name="text3" /><br /> ・JSファイル function formCheck(){ var flag = 0; if(document.mailform.text1.value==""){ flag = 1; document.getElementById('text1').style.display="block"; }else{ document.getElementById('text1').style.display="none"; } if(document.mailform.text2.value==""){ flag = 1; document.getElementById('text2').style.display="block"; }else{ document.getElementById('text2').style.display="none"; } if(document.mailform.text3.value==""){ flag = 1; document.getElementById('text3').style.display="block"; }else{ document.getElementById('text3').style.display="none"; } if(flag){ document.getElementById('notice-form').style.display="block"; return false; }else{ document.getElementById('notice-form').style.display="none"; return true; } }
- 締切済み
- JavaScript
- 変数内容をHTML内で表示する方法
javascript初心者です（主にはperlを使っています）。 ajaxに手をだしたところ、perlとの変数の取り扱い方が基本的なところで違っていて戸惑っています。 例えばperlの場合、タグ内の変数（例えば$msg）は、ホームページで表示する際は、その内容が展開表示されるので、 javascriptでも、変数（例えばmsg）を、それと同様に扱ったところ、全く展開表示されずに困っています。 javascriptで変数（例えばmsg）の内容を、htmlタグ内で表示させるには、どうしたらよいのか教えて下さい。 （あれこれ検索してみましたが、何故か、その方法が見つかりませんでした） 具体的には、、、、、 （以下のソース参照） 「チェック」ボタンをクリックしたら、それをきっかけにして、外部プログラムが起動し そこからの返答として、javascriptの変数msgの中に 「exist」もしくは「noexist」が代入されて返ってきます。 それに基づき、javascriptの変数 resultの中に「有 msg」又は「無 msg」が代入され、 それが、<div id="note$id"></div>の部分に表示されます。 が、その際、変数msgの内容を表示させたいのですが、それができません。 例えば result = '有 document.write(msg);'; とやったのですが、それでも表示されません。 msgの内容をHTMLタグ内で表示させる方法を教えて下さい。 よろしくお願いします。 --------------------------------------------- 実際のソース（肝心な部分だけを抽出） --------------------------------------------- ＜header部分＞ <!-- JQuery --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- // When DOM is ready $(document).ready(function(){ // ------- Form ------- $("input").click(function(){ id2= $(this).attr("class"); sharpform="#form"; sharpfields="#fields"; sharpnote="#note"; formid = sharpform + id2; fieldsid= sharpfields + id2; noteid= sharpnote + id2; $(formid).submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "./外部ブログラム名.cgi", data: str, success: function(msg) { // Message Sent? Show the 'Thank You' message and hide the form if(msg == 'exist') { result = '有 msg'; $(fieldsid).hide(); } else if(msg == 'noexist') { result = "無 msg"; $(fieldsid).hide(); } else { result = msg; } $(noteid).html(result); } }); return false; }); }); }); --> </script> --------------------------------------------- ＜body部分＞ <div id="note$id"></div> <div id="fields$id"> <form id="form$id" method="post" action=""> <input type="hidden" name="method" value="post"> <input type="hidden" name="check" value="$check"> <input type="submit" value="チェック" class="$id"/> </form> </div> ※html表示時には、$idには、1や２等の数字が入って表示されます。 ---------------------------------------------
- ベストアンサー
- JavaScript
お礼
こちらでも確認できました。 丁寧な対応に心から感謝致します。