[onClick]ボタンを押すことで入力欄に文字を挿入する方法は?

このQ&Aのポイント
  • Webページに文字入力欄とボタンを配置し、ボタンを押すと入力欄に文字が出力される方法を知りたい。
  • 試したい案では、inputタグのonClick属性で関数を呼び出して文字を挿入するが、関数の実装方法やspanタグの設定について困っている。
  • 助言が欲しいので、この方法についてコメントをいただきたい。
回答を見る
  • ベストアンサー

[onClick]ボタンを押すことで入力欄に文字を挿入する方法は?

Google の TOP ページを想像していただけるとわかりやすいかと思うのですが、 ※ http://www.google.co.jp/ Web ページ(html ファイル)に文字入力欄(ボックス)とボタンがある時、 ボタンを押すとボックスに何らかの文字が出力されるように JavaScript を組みたいのですが、何か良い方法はご存知でしょうか? 以下が私が考えている案です。 *********************************************************************** 文字入力欄(ボックス)は input タグによって作られるので、 <input class=hoge onClick="charInput('ぬるぽ')"> のようにして input タグ内に onClick を埋め込み、 関数 charInput(引数) については head タグ内の script タグ内で定義します。 しかし、この関数部をどのように実装すれば良いかや、 span タグの設定をしなくても良いのかなど、 調べても不明な点を解決できず困っております。 *********************************************************************** 以上、大変恐縮ですが何かコメントいただけると非常に嬉しいです。 よろしくお願いします。

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

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

<script type="text/javascript"> function clicli(){ document.frm.target.value = "あああ"; } </script> <form name="frm"> <input type="button" value="実行" onclick="clicli()" /> <input type="text" name="target"> </form>

orutamadaa
質問者

お礼

使えました! ありがとうございます! 非常に勉強になりました!

関連するQ&A

  • 二つの入力欄に、同時に同じ文字を入力したい

    掲示板の投稿欄を、 「お手軽版(投稿欄(1))」と 「本格版(投稿欄(2))」の二種類を用意したいと思っています。 JavaScriptを使って、 例えば、投稿欄(1)に名前を入力したら、 同じ文字列が投稿欄(2)にも反映されるようにしたいのですが、 どのようなコードを書けば良いでしょうか。 似たような質問を調べたのですが、 (1)を<input name="A">、(2)を<input name="B">としてAをBにコピーするというものがありました。 試してみると確かに同じ文字列が入力されるのですが、肝心の投稿ができませんでした。 掲示板の仕様上、 (1)も(2)も<input name="name">の部分は必須で、変えられないようなのです。 ちなみに(1)にだけ入力して(2)が空欄だと、空欄として処理されてしまいます。 <form>タグも一つしか使えません。 一晩色々やってみてどうしても上手くいかず、 最後の手段として、こちらでご教授願えればと思い、お伺いしました。 説明がヘタで申し訳ないのですが、不足な点は仰って下さい。 どうぞよろしくお願いいたします。

  • 現在

    現在 <table> <tr> <td> <input type="button" value="1" onclick=""/> <input type="button" value="2" onclick=""/> <input type="button" value="3" onclick=""/> </td> </tr> </table> といった単純なテーブルを作成しています。 上記のボタン1,2,3とそれぞれの間に空白を開けたいと思っているのですが、 <input type="button" value="1" onclick=""/>    <span style="width:50px">&nbsp;</span> <input type="button" value="2" onclick=""/> <span style="width:50px">&nbsp;</span> <input type="button" value="3" onclick=""/> と作成するとIE6ではボタン間に隙間が開くことを確認したのですがIE8では spanタグが無視されてしまい、ボタン間が詰まった表示のままになってしまいます。 IE8ではspanタグで隙間を作ることは難しいのでしょうか? また他に手法がありましたら、紹介していただけると幸いです。 よろしくお願いします。

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

    アレンジしたいのです。 <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> 上記のようにして「ボタン押す=文字出る」を作りました。 さらには、1文字づつもったいぶって、文字を出したいのです。 別の、タグで「勝手に1文字づつ出る」のは、あったと思いますが、ボタンで、動作開始をしたいと思います。 何か、よいアイデアはありますでしょうか?

  • 入力欄とそれを入力中にエンターを押した時の、ボタンの連動方法

    文章で書くと分かりにくいかもしれませんが、 入力枠(<input type="text" ...)が2つあり、 それに対応するサブミットボタンも1つづつあるとします。 各入力枠に入力中に、エンターを押した時のボタンを 自動的に適応させるにはどうしたらよいでしょうか。 ・・・やっぱり、文章だと分かりにくいかもしれませんが・・・。 例えば、ぐーぐるの検索結果画面だと、画面上部にも 下部にも、検索条件入力欄があって、それぞれ、右側に検索実行のボタンがありますよね。 そのボタンは、上の入力欄にフォーカスを当てると、 上のボタンにエンターのフォーカス(?)が自動的にきますよね。 下の入力欄にフォーカスを当てると、下のボタンにエンターのフォーカス(?)がきます。これのやり方がしりたいです。 JavaScriptの話ではないかもしれませんが・・・。 どなたか教えてください。お願いします。

  • mediawikiで自前のWEBフォントの利用

    お世話になります。 現在mediawikiでwikiページを作成していますが、自前のフォントをサーバーにアップしておいて、そのフォントを使用するということは可能でしょうか? 例えば下記のように編集ページで指定した文字をclass指定したhtmlタグで囲んだらその文字を特殊なフォントで表示するような形です。 <span class="hoge">アイウエオ</span> (class"hoge"で囲った文字を特殊文字で表示) また、検索時にもその文字が使え、検索結果の文字にも使えると尚よいです。 最低でも指定した文字に使用する様な形は実現したいと思います。 ご存知の方、よろしくお願い致します。

  • 「テキスエリアの選択文字前後に文字挿入」で…

    http://mugi.cc/js/ ↑こちらのページの下のほうにある「テキスエリアの選択文字前後に文字挿入(IE専用) 」で紹介されているスクリプトを用いて、テキストエリア内の選択文字をリンクタグ化(?)することは可能でしょうか。 サンプルでは[B](太字)のボタンのタグ等が、下記のようになっており、文字を選択してから押せば「<B>○○</B>」と表示されます。 <input type=button onclick=ins("<b>","</b>") value=b> 選択した文字列の前と後に文字を挿入なので、前に「<a href="」、後に「" target="_blank">こちら</a>」って入れれば、リンクのタグになるかと思い、下記のように書き換えてみたのですが…ダメでした; <input type=button onclick=ins("&lt;a&nbsp;href=&quot;","&quot;&nbsp;target=&quot;_blank&quot;&gt;こちら&lt;/a&gt;") value=リンク></td> どなたか何故ダメなのか教えて頂けませんでしょうか(>_<) よろしくお願いいたします。

  • JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続

    JavaScriptで連続する空白を、htmlタグ付きで別の文字の連続に置換する方法 ※可視化のため下記のサンプルでは、空白を「_」で表現しています 「_」の連続を、「#」の連続とそれをタグで囲んだ状態にしたいと思っています。 やりたいことはこんな感じです。 (0):置換前:hoge_hogehove___asd#bn__ (1):置換後:hoge<span class="…">#</span>hogehove<span class="…">###</span>asd#bn<span class="…">##</span> しかし正規表現の書き方が分からなかった為、現状のコードはこんな感じにしています。 str.replace(/_/g, "<span class='…'>#</span>"); 実行結果はこうなります。 (2):現状:hoge<span class="…">#</span>hogehove<span class="…">#</span><span class="…">#</span><span class="…">#</span>asd#bn<span class="…">#</span><span class="…">#</span> 無駄に長いのですがとりあえず現状でも、htmlとして表示したときの結果は間違っていません。 しかし ・正規表現を十分に理解できていないレベルの低いコードっぽい ・最終的には比較的多くの文字列を処理をする ・保持しておいて繰り返し表示するので置換後の文字列を小さくしておきたい と思っています。 (0)を(1)の状態に変換する方法を教えてください。 出来れば正規表現でシンプルにパシッと決める方法を希望しています。 よろしくお願いします。

  • onclickで文字をクリックしたら下の方に文字を出す

     ラジオボタンならありましたが、ボタンをクリックしたときではなく普通の文字をクリックしたときに文字を出したいのですが出来ますか。 <input type="button" value="クリック1" onClick="document.all.div1.innerText='クリック1がクリック'"> <div id=div1></div> がラジオボタンで文字を表示する方法で <A onclick="javascript:location.href='index.html';">トップ</A>  トップをクリックしたらindexに移動する方法なのでこれを組み合わせれば出来ると思いますがなにせJavaScriptは初心者なものでよく分かりません。  それと文字を押したら「どこどこ」に出すと「どこどこ」の制御、例えばmarginで指定など出来ましたら教えてください。 長くて判りにくいですがどうぞよろしくお願いします。

  • onClickイベントの変更方法

    JavaScriptのonclickイベントについてですが、  <form name="fm">  <input type="button" name="bt" value="開始" onclick="Change(1)"> という感じのフォームで、ボタンを押すとChange関数の方で、  if(f == 1) {    document.fm.bt.value="停止";    document.fm.bt.onclick="Change(0)"; //(A) として、onclickイベントの内容を変更したいのですが、 実際には上のような(A)の文では、 エラーは出ませんが、イベントの実行はできません。 onclickイベントの変更方法をご教授下さい。 ちなみに、プログラム自体は別の方法で対処しましたので、 「もっといい方法がある」というご回答は結構です。 それと、もう一つ教えていただきたいのですが、上の例で、  document.writeln(document.fm.bt.onClick); と実行すると"undefined"と表示されますが、  document.writeln(document.fm.bt.onclick); //(onClickのCが小文字) と実行すると"function anonymous() { Change(1) } "と表示されます。 大文字と小文字で、なぜ動作が変わるのでしょうか? ご教授下さい。

  • 正規表現で特定のHTMLタグのクラスから文字列を取り出したい

    はじめまして。 現在PHP勉強中の者です。 タイトル通りクラス付けされたHTMLタグ内の文字列を取り出したいのですが、上手くいかず困ってます。 利用サーバーはコアサーバーで環境は下記通りになります。 apache:1.3.37 PHP:5.2.5 スクリプトはUTF-8、HTMLもUTF-8です。 タグは<span class="hoge">文字列</span> のような感じです。 preg_match_all("/<span class=\"hoge\">(.*)</span><\/em>/", $html, $results); こんな感じでやってるんですが引っ掛かりません。。。 よろしくお願いします。

    • 締切済み
    • PHP

専門家に質問してみよう