JavaScript初心者のためのtextareaに文字列を追加する方法
- JavaScript初心者のための、2つのテキストエリアに文字列を追加するスクリプトの作成方法を紹介します。
- 入力された姓と名を連結して、3つ目のテキストエリアに表示するスクリプトを作成する際に起こる問題と解決方法について解説します。
- スクリプトを修正して、2つ目の文字を入力する際に1つ目の文字が消えてしまうバグを回避する方法について説明します。
- ベストアンサー
textareaに文字列を追加する方法
JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>
- shuriccm
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
姓・名の順番で入力して、済をクリックしてくれる前提だと、 function setData1(){ txt2= document.form7.t2.value; document.form7.list.value += "名："+ txt2; }
関連するQ&A
- 選択フォームへの追記について
現在、下記のように一つのフォームの場合は、 ボタンを押すと追記されますが、 複数のフォームがある場合に、 選択されているフォームへ、 追記するには、どうすればよろしいでしょうか、 よろしくお願いいたします。 <html> <head> <script language="JavaScript"><!-- CR = String.fromCharCode(13); function setData(param) { txt = document.myFORM.myTEXT.value + param + CR; document.myFORM.myTEXT.value = txt; } // --></script> </head> <body> <form name="myFORM"> <input type="button" value="月曜日" onClick="setData('月')<br> <input type="button" value="火曜日" onClick="setData('火')"><br> <textarea rows="9" cols="20" name="myTEXT"></textarea><br> </form> </body> </html>
- 締切済み
- JavaScript
- [javascript][IE] textarea内の改行を消す方法を教えてください。
テキストエリア内の改行をreplaceで除去したいのですが、FireFoxではうまくいくのですがIEではうまく動作しません。 下記のようなソースです。 IEではどのように書けば良いのでしょうか。 <html> <head> <script type="text/javascript" language="javascript"> function change_box(){ temp = document.getElementById("in").value; temp = temp.replace(/\n/g,""); document.getElementById("out").value = temp; } </script> </head> <body> <form> <textarea id="in" rows="3" > 一行目 二行目 三行目 </textarea><br /> <textarea id="out" rows="3" ></textarea><br /> <input type="button" value="変換" onclick="change_box()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- Javascriptで複数のテキストエリアの文字列を連結させたいです
Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。
- ベストアンサー
- JavaScript
- このバグの解消方法は？
実行してみれば分かると思いますが，以下のコードは自分が製作した進数変換プログラムです。しかし，文字数が多いとバグが出てしまう事が発見されました。この問題を解決するには，どこをどのように修正すべきなのでしょうか。 <br><script type=text/javascript><!-- function convdh(){dd=eval(document.toHex.DecData.value);document.toHex.HexResult.value=dd.toString(36);} function convhd(){hh=eval(0x+document.toDec.HexData.value);document.toDec.DecResult.value=hh.toString(10);} function compute() {s = document.f3.type.selectedIndex; if(s==0) z = parseInt(document.f3.n1.value,36); document.f3.result.value = z;} //--></script><form name=toHex><textarea name=DecData>ここに入力された10進数は，</textarea><textarea name=HexResult>36進数化されてここに表示されます。</textarea><input type=button onclick=convdh() value=演算></form><br><br><form name=f3><textarea name=n1>ここに入力された36進数は，</textarea><textarea name=result>10進数化されてここに表示されます。</textarea><input type=button onclick=compute(); name=check value=演算><br><br><select name=type><option selected>♥</option></select></form><br> ジャバスクリプトは初心者です。お願いします！
- ベストアンサー
- JavaScript
- Textareaの入力文字数チェックについて（タグ無視）
TEXTAREAの文字数チェックまではできるのですが しかし、今回はHTMLのタグも入力されます。 タグを無視した文字数もカウントをやりたいです。 ＰＨＰにはそのような関数があったような気がしますが ... JavaScriptではどのようにすれば実現できるのでしょうか？ タグの文法エラーはない前提でよいです。 よろしくお願いします。 <html> <head> <title>入力文字数のチェック</title> <script language="JavaScript"> function check() { txt = document.form1.sample.value; n = txt.length; if (n > 100) alert("100文字以内にしてください"); } </script> </head> <body> <form name="form1"> <textarea rows="10" name="sample" onChange="check()" cols="20"></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- 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
- テキストエリアの制限字数以上の文字を消したい
いつもお世話になっております。 現在、JavaScriput勉強中の初心者です。 テキストエリアにJavaScriptでmaxlength機能を付け制限字数を超えると警告ダイアログを出す ようにしたのですがコピペで制限字数を２文字以上超えるとBackSpaceで１文字消すたびに 警告ダイアログが出るというバグが起きてしまいます。 そこで警告ダイアログのOKボタンを押すと制限字数以上の文字は消すプログラムが組みたい のですがどうすればよいですか？ あと残り入力可能文字カウンタをsetIntervalを使ったものに変更したら警告ダイアログすら表示 されなくなってしまいました・・・よろしくお願いします。 ●変更前 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- function ShowLength( str ) { document.getElementById("inputlength").innerHTML = 20 - str.length; } function check() { txt = document.myFORM.myTEXT.value; n = txt.length; if (n > 20) alert("20文字以内にしてください"); } // --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body> ●変更後 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> <script type="text/javascript"><!-- (function(){ var intervalId = setInterval(function(){ var n = 20 - document.getElementsByName("myTEXT")[0].value.length; if(n < 0) n = 0; document.getElementById("inputlength").innerHTML = n; }, 100); })(); function check() { txt = document.myFORM.myTEXT.value; i = txt.length; if (i > 20) alert("20文字以内にしてください"); } // --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body>
- ベストアンサー
- JavaScript
- できる人がいたらお願いします。
大切なところだけ下記に書き込みました。 今の所ここまでできていて後少しと言う所だと思うのですが。下記の※の部分が邪魔をしてどうしてもframe1.htmlのボタンが無効化してしまいます。 frame2.htmlの※の所を抜かせばいいじゃないかと思うのですが、frame2.htmlは加工できません。 なので、javaでもperlでもなんでもいいので。 frame2.htmlだけ変えないでtextareaに文章を入れたいです。 ヨロシクお願いします。 --------index.html------- <!DOCUMENT HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>frames1.0</title> </head> <frameset cols="50%,50%"> <frame src="frame1.html" name="frame1"> <frame src="frame2.html" name="frame2"> </frameset> </html> --------frame1.html------- <HTML> <body> <form> <input type="button" value="送信" onclick="window.parent.frame2.document.getElementById('txt').value='文章１';window.parent.frame2.document.getElementById('txt1').value='文章２';"> </form> </body> </html> --------frame2.html------- <html> <body> <input name='txt' type='hidden' value=''> ※ <input name='txt1' type='hidden' value=''> ※ <center> 文章<BR> <textarea rows=2 cols=38 name=txt></textarea><BR> 文章<BR> <textarea rows=2 cols=38 name=txt1></textarea><BR> </center> <body> <html>
- ベストアンサー
- その他（プログラミング・開発）
- textbox間の結合時、空白の時は、スペースを省きたい
<script type="text/javascript"> <!-- function ketugou(){ document.f.q.value=document.f.t1.value+" "+document.f.t2.value+" "+document.f.t3.value+" "+document.f.t4.value+" "+document.f.t5.value; } //--> </script> <form name="f"> キーワードを入力：<br> <input type="text" size="55" name="t1"><br> <input type="text" size="55" name="t2"><br> <input type="text" size="55" name="t3"><br> <input type="text" size="55" name="t4"><br> <input type="text" size="55" name="t5"><br> <input type="button" name="connect" value="結合" onClick="ketugou()"><br> 結合時の内容を表示：<br> <input type="txt" name="q" size="55" maxlength="255" ><br> </form> で、空白のテキストボックスの場合は、スペース（" "）なしで、 結合させたいんですが、どうしたら、良いのでしょうか？
- ベストアンサー
- JavaScript
- textareaへデータ表示（改行変換）
こんにちは。 データベースから取得したデータを編集する仕組みを作っています。 下記のサンプルは単純化したもので、データベース部分は省いています。 <?php print <<<EOF <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> EOF; $test2 = "こんにちは<br />さようなら"; $test2 = str_replace("<br />","\n", $test2); //この１行に問題あり？ print <<<EOF <script type='text/javascript'> function ListToField(){ document.getElementById('aaa').bbb.value = "$test2"; } </script> <a href='#' onClick='ListToField()'>テスト</a> <br> <form id="aaa" action="ccc.php" method="post"> <textarea name='bbb' id="bbb" cols=20 rows=2>$test</textarea> </form> </body> </html> EOF; ?> 「テスト」をクリックしたときに、<br>を\nに変換したものをtextareaに表示させたいのですが、何も表示されません。 テキストエリアの「$test」は別に使用するので、このまま置いておきたいのです。 あくまで、「name='bbb'」をたよりに$test2の中身を渡したいのですが、 改行が入っていると渡せないのでしょうか？ プログラミング初心者で、いろいろ調べてもよくわかりませんでした。 ご教示いただけると嬉しいです。よろしくお願いします。
- ベストアンサー
- PHP
お礼
バッチリできました！！！ 本当にありがとうございます。 勉強になりました。