• 締切済み

消えないinput内の文字

グーグルの検索窓を付けてクリックすると 消える文字を表示しようと思ったのですが 思ったように消えてくれません ソースの一部 <input type="text" name="q" size="18" onfocus="if (this.value == 'keyword') {this.value = '';}" onblur="if (this.value == '') {this.value = 'keyword';}" value="keyword" /> どこか間違っているのでしょうか? それともこれ以外に問題があるのでしょうか? ちなみにIE8とFirefox3.5で確認しました

  • dct18
  • お礼率69% (23/33)
  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • KI401
  • ベストアンサー率53% (44/82)
回答No.1

この際細かいことは置いておくとして、ひとまず回答。 Firefoxで確認してみたけど、一応それっぽく動いてるみたいだよ? どういう動作を期待しているのだろう?

dct18
質問者

お礼

回答ありがとうございます 補足に書き忘れたことを書きます フォームを3つにし onfocus="alert('フォーカスされました')"を付けて 試してみたところ一番上だけが反応しませんでした どうやらフォーカス自体が動作していないようです

dct18
質問者

補足

すみません単体だと動作するようです 試しにアップしてみた物も動作できたので 使用しているレンタルサーバの問題ではないようです また同じものを下につけてみたら動作しました

関連するQ&A

  • inputとtextareaに

    今、フォーム部品に以下のような指定をしています。 <input type="text" value="デフォルト値" onfocus="if(this.value==this.defaultValue)this.value = ''" onblur="if(this.value=='') this.value=this.defaultValue"> このonfocus以降の指定をinput type="text"とtextareaのみに自動で追加しようとしているのですが、調べてもよくわからなかったため質問することにしました。 このような指定はjavascriptでできますか?

  • サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしています

    サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしていますが、 うまくいかずに非常に困っております。 今のhtmlがこれです。 -------------------- <form name="myform" action="http://www~~" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' }" onblur="if (this.value == '') { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- cssで<input>のcolorを指定したら、 入力する前の表示も、入力した時の表示も同じ色になりました。 そこで、調べた結果以下のようにonfocusとonblurにcolorを指定したのですが、 うまくいきませんでした。 -------------------- <form name="myform" action="http://www~~" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' } { this.style='color:#000000' }" onblur="if (this.value == '') { this.style='color:pink' } { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- javaが必要なのでしょうか? javaには詳しくないため、必要でしたら教えていただきたいです。 どうぞご回答お願いします・・・。

  • テキストエリアにvalue以外で文字列

    <input id="name" name="name" type="text" value="name" onblur="if(this.value == '') this.value='name';" onfocus="if(this.value == 'name') this.value='';" /> フォームにnameという文字列が表示されていてクリックすると文字列が消える。フォーカスを外すと再びnameが表示される。 それだけならば上記のコードで問題ないんですが、フォームに何も入力せず投稿ボタンを押すと、内容が「name」のまま投稿されてしまいます。 何か解決する良いアイデアはないでしょうか。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • フォームに入力した値の制御について

    フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1:' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問2:' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問3:' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問4:' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問1:</strong><br> <input type="text" name="text01" value="1入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2:</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3:</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 3入力してください </textarea><br> <strong>・諮問4:</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 4入力してください </textarea><br> <strong>・出力結果:</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);">&nbsp;<br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>

  • wordpressのSubscribe2について

    お世話になります。 現在、wordpressのサイトに、 メルマガプラグインSubscribe2を設定完了したところです。 固定ページに、【Subscribe2】を組み込み、 メルマガ登録ページを作ったのですが、 メールアドレスを入力する欄が異常に狭くて困っております。 ソースを見ると、 <input type="text" name="email" id="s2email" value="メールアドレスを入力してください... " size="20" onfocus="if (this.value == 'メールアドレスを入力してください... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレスを入力してください... ';}" /></p><p><input type="submit" name="subscribe" value="登録する" />&nbsp;<input type="submit" name="unsubscribe" value="登録解除する " /> となっていて、size="20"が曲者のようです。 CSSなどはどこをいじればよいのでしょうか。 宜しくお願いいたします。

    • 締切済み
    • CSS
  • textとtextareaの書式に設定について

    先日、質問をさせて頂きました者になります。 input textとtextareaの書式の設定制御の方法が、 分からなくなってしまい質問をさせて頂きました。 【やりたい事】 textやtextareaの初期値のテキスト色とバックグランの色を、 textやtextareaに初期値が入っている時と入力した値が入っている時に、 指定した書式に各種設定したいと思っています。 具体的には、textやtextareaに初期値が入っている時には、 初期値の文字を薄いグレー色に設定し、バックグランドをピンク色に設定し、 textやtextareaに入力をした値が入っている時には、 入力した文字を黒色に設定し、バックグランドを白色に設定したいと思ってます。 ご教授頂ければと存じます。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> if((text01 = formObj.elements["text01"].value)==formObj.elements["text01"].defaultValue)text01=""; <!--text02を取得--> if((text02 = formObj.elements["text02"].value)==formObj.elements["text02"].defaultValue)text02=""; <!--textarea01を取得--> if((textarea01 = formObj.elements["textarea01"].value)==formObj.elements["textarea01"].defaultValue)textarea01=""; <!--textarea02を取得--> if((textarea02 = formObj.elements["textarea02"].value)==formObj.elements["textarea02"].defaultValue)textarea02=""; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1:' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問2:' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問3:' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問4:' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問1:</strong><br> <input type="text" name="text01" value="1入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2:</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3:</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 3入力してください </textarea><br> <strong>・諮問4:</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> 4入力してください </textarea><br> <strong>・出力結果:</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);">&nbsp;<br> <textarea cols=60 rows=20 name="output" id="output"></textarea><br> <textarea id="text" cols="30" rows="5" wrap="soft"></textarea><br> <button onclick="save();">save</button><a id="anchor" href=""></a> </form> </body> </html>

  • ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには

    どなたかお力を・・・ 宜しくお願いします。 メールフォームを作成していて、 テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02 から、1箇所選択してもらうようにしてあります。 テキストボックスに始めから、例を記入してあるのですが、 ラジオボタンにチェックを入れた際に消えるようにしたいのです。 フォームのコメントを消すjavascriptは変更してもらっても構いません。 <INPUT type="text" name="あいうえお" onfocus="if (this.value == '例)Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例)テスト';" value="例)テスト"> <INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01 <INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02

  • 検索窓をクリックすると文字が消える方法

    初歩的な質問ですいません。 下記のURLの「検索窓をクリックすると文字が消える」を参考にしました。 http://fb.skr.jp/bowz/archives/001990.html HTMLは <input type="search" value="Search" onfocus="if (this.value == 'Search') { this.value='' }" onblur="if (this.value == '') { this.value='Search' }" /> で、この説明は 検索窓に「Search」が最初から表示 → 検索窓にカーソルを表示 → 文字が消える → 空白なら「Search」が再 び出る というようになっていますが、 私の希望としては 検索窓は最初から空白 → 検索窓に任意の文字を入力 → 検索窓にカーソルを表示 → その任意の文字が消える としたいのですが、このHTMLを存知であれば教えてください。

    • ベストアンサー
    • HTML
  • パスワード入力フォームの実装で、IE6、7にも対応するには?

    入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを このサイトで教えてもらって実装したのですが Firefoxでは下記のソースで実装できたのですが IE6とIE7ではフォームに入力すると 入力した文字が●●●●ではなく、そのまま表示されてしまいます。 これを●●●●になるようできないでしょうか? 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> <script> <!-- function hide_pwd(pw){ if(pw == 'パスワード'){ document.getElementById("pwd").value =""; document.getElementById("pwd").setAttribute("type", "password"); } } // --> </script> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input id="pwd" type="text" name="pass" onfocus="javascript:hide_pwd(this.value);" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。

  • パスワード入力フォームのガイドの制作するには・・・?

    入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを 作りたいのですが input type="text" のフォームはできましたが input type="password" のフォームに実装すると ガイド文字も●●●●と表示されてしまいます。 これを制作するのは無理なのでしょうか? 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input type="password" name="pass" onfocus="if (this.value == 'パスワード') this.value='';" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。