javascriptでテキストボックスに文字を挿入する方法
- javascriptで簡単な入力ツールを作成し、テキストボックスに文字を挿入する方法を教えてください。
- テキストボックスに文字を入力しつつ、「挿入」ボタンを押したら、定型文からランダムで文末に文字を挿入する方法を教えてください。
- javascriptを使用して、テキストボックスの内容をリフレッシュせずに、「挿入」ボタンを押すたびに文字を追加する方法を教えてください。
- ベストアンサー
javascript/テキストボックスに文字を挿入
はじめまして。 この度、javascriptで簡単な入力ツールを作成することになりました。 テキストボックスに文字を入力しつつ、 「挿入」ボタンを押したら、定型文からランダムで文末に文字を挿入する。 ……ということをやりたいのです。 やりたいこと例） 「12345」と入力後、「挿入」を押すと「12345あいうえお」になる。 さらに「67890」と入力し、「挿入」を押すと「12345あいうえお67890さしすせそ」になる。 「あいうえお」「かきくけこ」などランダムで文字を表示するところまでできましたが、 「挿入」ボタンを押すたびにテキストボックスの中身がリフレッシュされてしまいます。 コードの記述の仕方などご教示いただけますでしょうか。 あるいは、参考になりそうなサイトなど教えていただけると幸いです。 サンプルコードは以下のとおりです。 何卒よろしくお願いいたします。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>random test</title> <script type="text/javascript"> function rndMsg() { var target = document.getElementById('random'); var message = new Array( 'あいうえお', 'かきくけこ', 'さしすせそ', 'たちつてと', 'なにぬねの' ); var rnd = Math.random() * message.length | 0; target.value = message[rnd]; } </script> <div> <form name="frm1"> <textarea cols="60" rows="8" ID="random"> デフォルト </textarea> </form> <p onclick="rndMsg()">挿入</p> </div>
- jyunichi0804
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 target.value = message[rnd]; ではtargetのvalueにmessage[rnd]が毎回設定されてしまいますので常に更新されています。 target.value += message[rnd]; こうすることによってtargetのvalueにある値にmessage[rnd]が追加されて行きます。
関連するQ&A
- カーソル位置に文字を挿入
カーソル位置に文字を挿入しようとしているのですが、どうもうまく行きません。 コードは以下なのですが、FireFox 等ではうまくいきますが、IE ではうまくいきません。どこが間違っているのでしょうか。よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript"> //@cc_on (function(){ document./*@if(1) attachEvent('on'+ @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/; if ( t.tagName == 'BUTTON' && /(^| )ContributionForm( |$)/.test( t.form.className ) ) { var content = t.form.elements['content']; /*@if(1) var r = document.selection.createRange(); var c = r.duplicate(); c.moveToElementText(content); c.setEndPoint('EndToEnd', r); var pos = c.text.length; @else@*/ var pos = content.selectionStart; /*@end@*/ var moji_1 = content.value.substring( 0, pos ); var moji_2 = content.value.substring( pos, content.value.length ); content.value = moji_1 + t.value + moji_2; } }, false ); })(); </script> </head> <body> <form action="#" class="ContributionForm" id="form" name="form"> <div> <button type="button" value="test">ボタン</button> <textarea name="content"></textarea> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリア文字制限について
テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか？？ なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascript 文字制限について
はじめまして。初心者でメールフォームを作成中です。 文字制限についてご教授ください。 初心者ながらどうにか6桁の文字制限をかける事が出来ました。 ここから最初の2桁のみ特定の数字（09）を入れなければエラーメッセージが表示されるようにしたいと考えています。 例：09****でないとエラーが出る この場合どうすればよいでしょうか？ <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!--// function restChar() { n = document.formN.textN.value.length; if(n > 6) alert("整理番号を正しく入力してください"); if(n < 6) alert("整理番号を正しく入力してください"); } //--> </SCRIPT> </HEAD> <BODY> 整理番号を入力してください <FORM name="formN"> <TEXTAREA rows="3" size="45" name="textN" onChange="restChar()"></TEXTAREA> </FORM> </BODY> </HTML> どうぞ宜しくお願いします。
- 締切済み
- JavaScript
- textareaで入力した文字を改行したままで表示したいのですが。
textareaに複数行で入力した文字を改行したままで表示したいのですが 改行されずに表示されます。 改行したままで表示するのはどうすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <textarea cols="30" rows="10" name="textN"></textarea> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="position:absolute;font-size:24px;"> </DIV> </BODY> </HTML>
- ベストアンサー
- HTML
- javascriptでtextareaに文字列を追加したい
textareaの最後尾に文字列を追加したいです。 いろいろサイトを検索してみたのですが、解決できず困っています。 <form>中に<textarea>とボタンを設定しておきボタンを押すと 文字列を最後尾に追加する。 というのはありました。 私は、ボタンは無しで、画面を読み終わったタイミングで、textareaの最後尾に文字列を追加したいのです。 （仕様で、bodyタグにonloadを記述することは出来ません。） （またcgiでHTML記述を生成しています。） が、どこかのサイトにあった例を見ても、どのように自分のソースに 反映したらよいのか分からず・・・。 サイトにあった例を参考に、下記のように記述してみましたが駄目でした。 <textarea name="textArea_A"></textarea> <SCRIPT LANGUAGE="JavaScript"> <!-- var objTextarea = document.getElementsByName('textArea_A')[0]; objTextarea.value += "AAA"; //--> </SCRIPT> （これで、<textarea name="textArea_A">AAA</textarea> となってくれると良いのですが・・・。） トンチンカンな意味不明な点があるかも知れませんが、 どうか宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 外部ファイルにするとテキストが書き込めない
こんにちは、javascript初心者です。 HTMLのtextarea内のテキストを変えたいのですが、HTMLにJSを埋め込むと動作するのですが、外部JSファイル読み込みだとなぜか何も表示されません。 なぜでしょうか。原因のわかる方、説明をどうかよろしくお願い致します。 ●HTML <head> <script src="test.js" type="text/javascript"></script> </head> <body> <form name="form1"> <textarea name="message" id="msg" rows="5" cols ="50"></textarea> </form> </body> ●JS window.onload = message(); function message(){ alert("hello"); //←これはちゃんと動作します。 document.getElementById("msg").value="hello"; //← 動作せず。 document.form1.message.value="hello"; //← これも上と同じく片方ずつ試しましたが、ダメでした。 }
- 締切済み
- JavaScript
- 画像をランダムにスクリプト
ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。
- 締切済み
- HTML
- スクロールするテキストボックスの文字色について
<script language="javascript"> <!-- var speed = 400; var m1 = '<<挿入曲>> '; var m2 = '【トップページ】 ： ～ '; var m3 = '【掲示板】 ： ～ 「～」 '; var m4 = '【チャット】 ： ～ 「～」 '; var m5 = '【写真館】 ： ～ 「～」 '; var m6 = ' '; var m7 = 'もうすぐ新学期♪'; var m8 = ' '; var msg = m1 + m3 + m4 + m5 + m6 + m7 + m8; msg = msg + msg; function formMsg(){ setTimeout("formMsg()",speed); msg = msg.substring(2,msg.length) + msg.substring(0,2); document.fgColor = "green"; document.msgbox.message.value = msg; // document.msgbox.message.fontcolor("#2EE005") // msg.fontcolor("#2EE005"); msg.fontcolor("orange"); } //--> </script> ～ <form name="msgbox"> <input type="text" name="message" size="100" height="10" style="background-color:black"> </form> 上記のようなメッセージボックスをページに貼り付けているのですが、 バックグラウンドを黒、スクロールして流れる、テキストボックスのメッセージの色をオレンジに したいのです。 バックグラウンドの黒はできたのですが、テキストをオレンジにするにはどうすればよいのでしょうか？
- ベストアンサー
- JavaScript
- 文字入力の初歩的な疑問にお答えください
以下のコードで、文字入力変数（tx3） を他のページでも共用するために 文字入力目的の function textout() を 外部ファイル化したいのですが 方法が分かりません。 入力欄と同じページに、入力された文字列を確認のために、 入力窓を消さずに表示するために、なるべく変数を使用する形で エレメントにあまり依存せずにこの目的を達成する方法を教えて下さい。 できれば、一つのページに４つくらいの入力欄を設けたいため、 具体的なスクリプトを例示していただければ助かります。 <html> <head> <script type="text/javascript"> function textout(){ if (document.getElementById){ var tx3 = document.form1.text1.value; document.getElementById("output").innerHTML=tx3; }} </script> </head><body> <form name="form1"> <textarea name="text1" cols="50" rows="4"></textarea> <br> <input type="button" onClick="textout()" value="verify"> </form> <div id="output"></div> </body> </html>
- ベストアンサー
- HTML
- JavaScriptからPerlへデータを送る方法について
プログラミング初心者です。 HTMLで書いたフォームの中にあるテキストエリアのデータを、JavaScriptでデータを取り出して、それをPerlで受け取りたいのですが、方法に見当がつきません。 以下は書いてみたソースコードです。 HTMLファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Form Test</title> <script type="text/javascript" src="JS/sample.js"></script> </head> <body> <form name=form1> <textarea name="comment" rows="3" cols="30">文字の入力</textarea> <input type="button" value="ボタン" onClick="Button()"> </form> </body> </html> JavaScriptファイル function Button(){ var comment = document.form1.comment.value; alert(comment); //値がとれてるか確認したかっただけです } Perlに関しては、#!/usr/bin/perl ぐらいしか、まだ分かりません。 よろしければ、JavaScriptからのデータ送信、Perlでのデータ受け取り方法を教えていただけないでしょうか。この質問に対して有効なサイトがあれば合わせて教えていただきたくおもいます。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
早速の回答ありがとうございました。 まさか+を一個いれるだけで解決するとは・・・！ 不勉強で申し訳ありませんでした。 無事、意図した通りに動作しました。 とても感謝しております。