• ベストアンサー

こんなこともJavaScriptで可能でしょうか?

以下のようなこともJavaScriptで行うことは可能でしょうか? <a href="#" onclick="hoeg">教えて</a> <a href="#" onclick="hoge">okwave</a> のようなリンクがあり、これをクリックすると<input type="text" name="word"> にリンクしてある文字が入力されていき、クリックした後の文字は色が変わるものです。又、べつなリンクをクリックすると1スペース空き、文字が入る形です。 例でdel.icio.usのタグ選択と同じ感じです。 どうぞよろしくお願いいたします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

del.icio.usの仕様がいまいちわかりにくい のですが・・・こんな感じですか? <a href="#" onClick="hoge(this)" style="color:blue">A</a> <a href="#" onClick="hoge(this)" style="color:blue">B</a> <a href="#" onClick="hoge(this)" style="color:blue">C</a> <input type="text" name="word" id="word"> <script language="javascript"> function hoge(num){ var d=document.getElementById('word'); d.value+=(d.value=="")?num.innerHTML:" "+num.innerHTML; num.style.color="red"; } </script>

itmedia_search
質問者

お礼

回答ありがとうございます。 まさにこれです!求めていたものはこれです!本当にありがとうございました。

関連するQ&A

  • PHPとJavaScriptで...

    PHPで以下のようなリンクを生成し、 <form name="hoge" method="post"> <input type="hidden" name="hogehoge"> </form> <a href="javascript:void(0)" onClick="submit('0')">あ</a> <a href="javascript:void(0)" onClick="submit('1')">い</a> <a href="javascript:void(0)" onClick="submit('2')">う</a> <a href="javascript:void(0)" onClick="submit('3')">え</a> <a href="javascript:void(0)" onClick="submit('4')">お</a> POSTで受け取ったデータを再びPHPで使用したいのですが、 (同一ページ内で) 色々調べてみたのですが、いまいちわかりません。 JavaScriptの部分をどのようにしたらよいか、また根本的に間違っていたらどのように変えればよいか、 教えてください。 m(_ _)m

    • ベストアンサー
    • PHP
  • javaScriptの記述方法

    onclick="javaScript:opensub('pop.html')" のようにあるリンクをクリックしたらウィンドウが開くというのをしているのですが、↓ <input type="image" name="test01" alt="test01" src="test/tes01/01.jpg" onclick="javaScript:opensub('pop.html')"/> <a href="#">○○○○○○○</a> ↑のようなリンクに上記のようなonclick="javaScript:opensub('pop.html')" を記述しようと思ったらどのようにすればいいでしょうか? すいませんがよろしくお願いいたします

    • ベストアンサー
    • HTML
  • javascriptで困っています。

    htmlのaタグの<a href="" onClick"hoge(); return false">からjavascriptの関数を呼び出したいのですが、html内に記述したものではなく、外部ファイルに記述した関数を呼び出したい場合はどのようにaタグを記述すればよいのでしょうか?

  • 複数のテキストボックスでインデックスを取得する方法

    htmlでテキストボックスを複数作り、そのうちの一つの テキストボックスをクリックすると、Javascriptで そのテキストボックスのインデックスを取得したい思います。 ソースは簡単ですが、以下の通りです。 サンプルとして5つテキストボックスを作成していますが、 実際は不特定(データの読み込み件数)です。 onclick="hoge(???);" の???の部分に、テキストボックスのインデックスを書きたいのですが。。。 リストボックスだと、selectedIndexで取得できるようなのですが、 テキストボックスはどのような関数を使えばいいですか? <html> <head>   <script language="javascript">     function hoge(index){     alert(index);   }   </script> </head> <body>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br>   <input type="text" name="hoge" onclick="hoge(???);"><br> </body> </html>

  • 【Javascript】でsubmit時に一瞬ページトップへ画面が動いてしまう

    FORMのACTION先への画面遷移を、onClickを使ってsubmit()しています。 === Javascript部分 ============================ <SCRIPT TYPE="text/javascript"><!-- function hoge(a,b){ frm.elm1.value = a; frm.elm2.value = b; frm.submit(); } --></SCRIPT> === HTML ====================================== <A HREF="#" onClick="hoge(1,2);">ほにゃらら</A> =============================================== HREF="#" としているせいか、 クリック時にページ先頭へ動いてからFORMの遷移先へ画面が遷移します。 Aタグを使っているのはスタイルシートでhover時のスタイルを指定したい為です。 Javascriptでsubmitしているのはご覧のようにクリック時に一処理したい為です。 普通のリンクのように クリックしてから遷移するまでの間に画面が動かないよう 自然に見せるにはどのようにすれば実現できるでしょうか。 ご存知の方いらっしゃいましたらご教示願います。 宜しくお願い致します。

  • javascriptでhtmlの書き換え

    t.htmlというファイルで、下のような画面を作ります。 example1へ「Topへ」 example2へ「top.html」 と入力してボタンを押すと、 <a href="top.html" target="_blank"> Topへ </a> というリンクが「インデックスを開く」の下に現れる というふうにしたいです。 また、再度t.htmlを開いた時には、前回追記したリンクが最初から表示されているようにしたいです。 javascriptを使って実現するにはどうしたらよいでしょうか? 若しくは、javascritpを使わずにできる方法があれば教えてください。 よろしくお願いします。 ######################################################## <a href="index.html" target="_blank"> インデックスを開く </a> <input type="text" name="example1" size="50"> <input type="text" name="example2" size="50"> <input type="button" value="汎用ボタン"> ######################################################## ↓ ######################################################## <a href="index.html" target="_blank"> インデックスを開く </a> <a href="top.html" target="_blank"> Topへ </a> <input type="text" name="example1" size="50"> <input type="text" name="example2" size="50"> <input type="button" value="汎用ボタン"> ########################################################

  • ボタンを押すとテキストボックスが増えるJavaScriptについて教えてください

    Javascriptで質問です。 <input type="text" name="hoge1" value=""> <input type="text" name="hoge2" value=""> <input type="text" name="hoge3" value=""> というようなテキストボックスがあり、「追加」というボタンを押すと 新たなテキストボックス <input type="text" name="hoge4" value=""> が追加されるようなJavascriptを作成したいと考えています。 新たに作られたテキストボックスには name="hoge4" name="hoge5" ・ ・ ・ というように、nameの部分に「hogeの右にある番号に1ずつ加算された名前」を付けていきたいのです。 検索すると、テキストボックスを追加していくだけのサンプルはいくつかあったのですが、nameの部分を加算していく、という例が無くて行き詰っています。 よろしくお願いいたします。

  • クリック→レイヤー→インプット?

    下記のようなことができるシンプルなサンプルを探しています。 <A HREF="javascript:function voi(){};voi()" onClick="hogehoge()">クリック</A> <INPUT TYPE="TEXT" NAME="都市名" SIZE="12"> 上記の「クリック」をクリックすると、windowではなくレイヤー画面が見え、そこに <A HREF="javascript:function voi(){};voi()" onClick="input()">東京</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">大阪</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="input()">京都</A><BR> という内容が表示され、クリックすると、「都市名」のテキストボックスに入る。レイヤーは消える。 クリックするとテキストが入るなどの部分は、私でもできますが、レイヤーをどう表示するかという部分がちんぷんかんぷん。 #レイヤーの説明もちょっとあやしいかもしれません。

  • セルをクリックして文字列をコピーしたい

    テーブルのセルをクリックすると、指定された文章をクリップボードにコピーするようにしたいです。 <table> _<tr> __<td class="time">12:00</td> __<td class="name"><a href="hoge">suzuki</a></td> _</tr> </table> 上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。 現在CSSでは td a{ display:block; width:100%; height:100%; text-decoration: none; } と設定しています。 どうやらJavascriptを使えばできるようなのですが、Javascript事態全く使ったことがないのでどう記述すればいいかがわかりませんでした。 調べてみたところ、inputタグにonclick="clipboardData.setData('text',this.value)"と入力すればできると聞きました。ですが、これはinputタグなのでこれはフォームのボタンをクリックした場合にコピーするような内容ですよね。 そうではなく、リンク先をクリックするようなのと同じような感じでセルをクリックすると、文字列をコピーできるような方法が知りたいのです。 できれば記述の方法も教えていただければ助かります。 どなたかご教示のほど、どうかよろしくお願いします。

  • クリック→テキストボックスに追加

    下記は、クリックすると、テキストボックスの文字が入れ代わります。こうでなく、「どれどれそれからどうした」と追加していくようにするにはどうしたらよいでしょうか? <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どれどれ'">どれどれ</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='それから'">それから</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どうした'">どうした</A><BR> <FORM name="myform"> <INPUT TYPE="TEXT" NAME="bun" SIZE="50"> </form>

専門家に質問してみよう