• ベストアンサー

ボタンでテキスト領域に文字列を表示させたい

　非常に初歩的なことでしょうが、ネットや書籍を見ても以下の ことが分かりません。お教えください。 ボタンを押すことで目的の文字列をフォームのテキスト領域に表 示したいのです。例えば、 <form> <input type="button" onClick=???? value="Click!"> <input type="text" size="10"> </form> 　という内容で、onClickの右側をどう書いたらよいか分かりません。 document.write("文字列")だと、画面が更新されてボタンやテキ スト領域まで消えてしまうので、だめです。本を参考にして、 「document」のところを「document.form.txt」に変えればよい のかと考えたのですが、それではエラーがでます。 　よろしくご教示ください。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

書き方はいろいろあるとは思うのですが、 とりあえず以下のソースでご要望の動作はするはずです。 ---------------------------------------------- <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html"; charset="Shift-JIS"> <title>JavaScriptTest</title> <script type="text/javascript"><!-- function func_msg() { var str_data = "ここに表示したい文字列を入れましょう"; document.fm.data.value = str_data; } // --></script> </head> <body> <form name="fm"> <input type="button" onClick="javascript:func_msg();" value="Click!"> <input type="text" size="10" name="data"> </form> </body> </html>

babusan
質問者

お礼

　丁寧に全体を書いていただいてありがとうございます。 　functionにいろいろな要素を入れれば、応用がききそうですね。助かります。

その他の回答 (2)

回答No.3

補足です。 JavaScript部分を分離せず、onClick一発で書くのであれば以下のようにすれば出来ると思います。 ---------------------------------------------- <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html"; charset="Shift-JIS"> <title>JavaScriptTest</title> </head> <body> <form name="fm"> <input type="button" onClick="javascript:data.value='ここに表示したい文字列を入れましょう';" value="Click!"> <input type="text" size="10" name="data"> </form> </body> </html>

babusan
質問者

お礼

　二通りの回答、本当にありがとうございます。 　こちらはまさに文字列を入れることに特化したシンプルな内容ですね。 今後もくじけずに勉強して参ります。また何かありましたらよろしくお願いします。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

onclick="this.form.elements[1].value='入力したい文字'" てな感じ formやテキストボックスに名前を付けとくと、わかりがよくなりますよ。

babusan
質問者

お礼

　回答ありがとうございます。思ったとおりの結果が出ました。 　formやテキストボックスに名前を付けることはおっしゃる通りです。 なるべく簡略化した形で例を出したので、省いた次第です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ボタンを押すと、テキストエリアに文字が出て、さらにそれを

    アレンジしたいのです。 <FORM> <INPUT type="text" value="テスト" name="b1" size="55"> <br> <font style="font-size:15px" color="#666666">ボタンをクリック！</font> <INPUT type="button" value="ボタン" onclick="b1.value='こうゆうふうに字が出る'"> </FORM> 上記のようにして「ボタン押す=文字出る」を作りました。 さらには、１文字づつもったいぶって、文字を出したいのです。 別の、タグで「勝手に１文字づつ出る」のは、あったと思いますが、ボタンで、動作開始をしたいと思います。 何か、よいアイデアはありますでしょうか？

  • ボタンを押したらテキストボックスの文字色をチェンジ

    ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？ 一応、自分なりに作ってみたものです。エラーがでます。 保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <html> <head> <script language="javascript"> function change(){ document.form1.text1.fgcolor="red"; } </script> </head> <body> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </body> </html> ----------------------------------------------------------

  • JavaScript text内にある文字のコピーの仕方について

    お世話になります。 現在作成中の テキスト内の文のバックスペースと テキスト内をクリアーは 下記の文となりプログラム上問題は御座いません。 <FORM name="a1"> <INPUT type="button" value="クリアー" onclick="document.a1.reset()"> <INPUT type="button" value="バックスペース" onclick="document.a1.a2.value=document.a1.a2.value.substring(0,document.b.c.value.length-1)"> <INPUT size="100" type="text" name="a2"></FORM> 出来ないのがボタンを押すとテキスト内の文字を コピーするという記述なのですが もし解られましたら お手数ですがお教え頂ければ幸いです。

  • 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>

  • JSで一つのボタンを押したとき、二つの内容を表示させる方法を教えて下さい

    ボタン<button>を押したとき、<INPUT>に押されたボタンの内容を表示するものを作りまして…。 とりあえず下記のソースをご覧下さい。 －－－－－ソース－－－－－－ ～HTML～ <button onClick="calc('INPUTに表示させる内容')">ボタン１</button> <INPUT TYPE="text" NAME="text1"> ～JavaScript～ function calc(ch) { document.form.text1.value =ch; } －－－－－－－－－－－－－－ 今のやりかたですと一つの<INPUT>にしか入力されないですが、これを二つの<INPUT>にそれぞれ違う内容を入力させることは可能でしょうか。 例えば： ■[ボタン１]を押すと ┃ ┣[インプット１]に表品名 ┃ ┗[インプット２]に表品の値段 雑な説明で申し訳ないですが、宜しくお願い致します。

  • <input type="file"/>

    に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？

  • 文字の貼り付け

    以前、WindowOpen　で文字を貼り付ける下記のスクリプトを教えて貰いましたが、ボタンAとBで貼り付ける文字を代える場合はどのようにすれば良いでしょうか？ （親ウィンドウ側） <script type="text/javascript"> function sendMessage(_win){ _win.document.form1.test.value = "xx.htmlのフォームに表示させたい文字"; } </script> <input type="button" value="ボタンA" onclick="window.open('xx.html');"> <input type="button" value="ボタンB" onclick="window.open('xx.html');"> ※ボタンA,Bで貼り付ける文字を変えたい。 （xx.html側） <body onload="opener.sendMessage(window);"> <form method=POST action="http://～.cgi" name="form1"> <input type=text name="test" value="" readonly> <input type=submit value="送　信"> </form>

  • ボタンを動的にdisabledさせたいのですが

    お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか？ 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。

  • 文字列でなくて数値として処理をしたい。

    年度があって、2008 ボタンをクリックすると1を足して2009としたいのですが、文字列として扱われ20081となってしまいます。 数値として処理するにはどのように修正したらいいのでしょうか？ ご存知の方教えてください。 <script type="text/javascript"> function test(parts){ var result = document.getElementById('result'); nendo = document.tForm.y.value; if(nendo == ""){ document.tForm.msg.value = "2008"; } else {document.tForm.msg.value = nendo + 1; } } </script> </HEAD> <BODY> </p> <form name="tForm"> <p> <INPUT TYPE="text" NAME="msg" SIZE=20 id="y"> <br> <input type="button" name="" value="足し算" onClick="test(this)">

  • テキストボックス 追加

    最初5つのテキストボックスを表示して追加ボタンを押して、6個目から15個目を追加しようとしています。name="tb1"　からname="tb15"までを設定したいです。15個になった際にボタンを押せなくしたいです。入力された情報をPHP側で処理しようとしています。 以下のソースを改良しようとしているのですが、うまくいきません。 どのようにしたらいいでしょうか？ <script language="JavaScript"> <!-- function add(){ document.all.AddArea.innerHTML = document.all.AddArea.innerHTML + "<br><input type=\"text\" name=\"Txt_Object\">"; } // --> </script> </head> <body> <form id="f1"> <div id="AddArea"> <input type="text" name="Txt_Object"> </div> <input type="button" value="追加" onClick="add()"> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する