ボタンの文字サイズ+入力バーの位置が勝手に変わる

このQ&Aのポイント
  • ボタンの文字サイズや入力バーの位置が勝手に変わるJavaScriptについての質問です。
  • バーに文字を入力すると、位置が変わる現象が発生しているため、修正方法を知りたいです。
  • JavaScriptの修正方法を教えてください。文字サイズや入力バーの位置が安定するようにしたいです。
回答を見る
  • ベストアンサー

ボタンの文字サイズ+入力バーの位置が勝手に変わる

下記のjavascriptを表示した際に、文字サイズが大ぐらいから中ぐらいに勝手に変わったり、ボタンの所にカーソルを持っていくと文字サイズが変化したり、バーに文字を入力すると、バーの位置が変わったりするのですが、どうなっているのでしょうか? 動かないようにしたいです。 javascriptは全くわからないので、 どこをどう変えればいいのか、わかりやすい回答をお願いします。 <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <INPUT type="checkbox" id="chk_blank" checked> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo" onClick="search('yahoo');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- ****Yahoo! --> <form name="f_yahoo" method="GET" action="" Accept-charset="euc-jp"> <input type="hidden" name="p" value=""> <input type="hidden" name="ei" value="euc-jp"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { formx.target = getTarget(); formx.submit(); } function sitetop(ur) { swin=window.open(ur,getTarget(),""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") { if(q=="") sitetop("http://www.yahoo.co.jp/"); else { fw=document.f_yahoo; fw.p.value=q; fw.action="http://search.yahoo.co.jp/search"; seteuc(fw); }} } function getTarget(){ blankFlg = document.fm.chk_blank.checked; target = ""; if( blankFlg == true ){ // 別窓で開く target = "_blank"; } else{ // 同じ窓で開く target = "_top"; } return target; } //--> </script>

noname#187804
noname#187804

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

  • ベストアンサー
  • aegills
  • ベストアンサー率70% (7/10)
回答No.1

javascriptではなく、cssでサイズ指定をしましょう ・バーの文字サイズ <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> を <input type="text" name="k" style="width:「バーの幅」; font-size:「文字サイズ」;" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> に変更し、上記の「」で囲まれた部分で好きな数値を指定しれやればできると思います。 ※「」も消してください バーの位置が変わるとのことですが、このソースを見る限りそのような動作をするようには見えません 可能ならばすべてのソースを提示していただいたほうが適格なアドバイスがもらえると思いますよ

noname#187804
質問者

補足

丁寧なご回答ありがとうございます! アドバイスのおかげでバーは動かなくなりました! しかし、最初に表示した時にボタンへカーソルを持っていくと、 yahooとリセットボタンの文字サイズが変化します。 ちなみにすべてのソースを掲示しています。CSSも何もいじっていません。初期設定のままです。 編集はヤフーのジオクリエーターでやっています。 http://www.geocities.jp/desk_top_search/aaaaa.html ↑こちらで確認できます。 このソースは質問して改造してもったのですが、改造をしてもらう前までは、バーも文字サイズも変化しませんでした。 元のソースが載っている質問と経緯はhttp://oshiete1.goo.ne.jp/qa4197457.htmlです。 よろしくお願いします。

その他の回答 (1)

noname#84373
noname#84373
回答No.2

書き出しは<hrml>からはじめること <head></head>内の文字コードの指定などを厳格に行うこと そもそも文頭が<form>から始まるのが、いかがなものかと。

関連するQ&A

  • javascriptに詳しい方、教えてください。

    表示すると表示した瞬間に、文字サイズが大ぐらいから中ぐらいに勝手に変わったり、ボタンの所にカーソルを持っていくと文字サイズが変化したり、バーに文字を入力すると、バーの位置が変わったりするのですが、どうなっているのでしょうか? javascriptは全くわからないので、 どこをどう変えればいいのか、わかりやすい回答をお願いします。 (質問投稿の際に​が勝手に挿入されたりしますので​が入ってた場合は注意をお願いします。) <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <INPUT type="checkbox" id="chk_blank" checked> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo" onClick="search('yahoo');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- ****Yahoo! --> <form name="f_yahoo" method="GET" action="" Accept-charset="euc-jp"> <input type="hidden" name="p" value=""> <input type="hidden" name="ei" value="euc-jp"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { formx.target = getTarget(); formx.submit(); } function sitetop(ur) { swin=window.open(ur,getTarget(),""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") { if(q=="") sitetop("http://www.yahoo.co.jp/"); else { fw=document.f_yahoo; fw.p.value=q; fw.action="http://search.yahoo.co.jp/search"; seteuc(fw); }} } function getTarget(){ blankFlg = document.fm.chk_blank.checked; target = ""; if( blankFlg == true ){ // 別窓で開く target = "_blank"; } else{ // 同じ窓で開く target = "_top"; } return target; } //--> </script>

  • リンク先を新しい窓で開くには?

    javascript初心者です。 2回目以降、リンク先が一つのページ上に上書きされてしまいます。 リンク先を開くたび新しい窓で開きたいのですがどうしたらよいのでしょうか? target=_blankやwindow.openなどではないかと思いますが設置場所がよくわかりません。。 また、サンプルソースを見てもjavascriptの部分がいまいち理解できずにいます。 だいたいの流れやURLクリエの部分(HTMLの部分)はなんとなく理解できるのですが文字コードなど表示方法などのところがよくわかりません;; わかりやすくコメントを書いていただけると助かります! ソースはこちらです↓ ------------------------------------------------------------------------------ <body> <noscript>JavaScriptが無効です</noscript> <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <input Type="submit" value="Google" onClick="search('google');"> <input Type="submit" value="Yahoo!" onClick="search('yahoo');"> </td></tr></table> </form> <!-- Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <!-- Yahoo! --> <form name="f_yahoo" method="GET" action="http://search.yahoo.co.jp/search" Accept-charset="Shift_JIS"> <input type="hidden" name="ei" value="SJIS"> <input type="hidden" name="fr" value="sfp"> <input type="hidden" name="p" value=""> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function setutf(fx){ bkup=document.charset; document.charset="utf-8"; display(fx); document.charset=bkup; } function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { swin=window.open("","category_root",""); formx.target="category_root"; formx.submit(); swin.focus(); } function sitetop(ur) { swin=window.open(ur,"category_root",""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} if(eng=="yahoo") if(q=="") sitetop("http://www.yahoo.co.jp/"); else { { fw=document.f_yahoo; fw.p.value=q; setsjis(fw); }} } //--> </script> </body>

  • javascriptを教えてください。

    チェックボックスを付けて、チェックを入れると全て新窓で開く(二枚窓目以降も全て新窓で開く)、チェックを入れない場合は全て同じ窓に上書き表示させるようにしたいです。(デフォルトはチェックが入っている状態にしたい) ※私はjavascriptの書き方は全くわかりません。後で記述パターンを見て機能を追加したりする予定です。 よろしくお願いします。 <form name="fm" action="void" onSubmit="return false;"> <table style="background-color: #e0e0e0"><tr><td> <input Type="text" name="k" size="60" maxlength="255" value="" onKeyPress="if(event.keyCode == 13) { search('google'); }"> <input Type="reset" value="Reset"> </td></tr><tr><td> <input Type="submit" value="Google" onClick="search('google');"> </td></tr></table> </form> <!-- ****Google --> <form name="f_google" method="GET" action="http://www.google.com/search" Accept-charset="Shift_JIS"> <input type="hidden" name="q" value=""><input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"><input type="hidden" name="hl" value="ja"> <input type="hidden" name="lr" value="lang_ja"><input type="hidden" name="num" value="20"> </form> <script LANGUAGE="JavaScript" Type="text/javascript"> <!-- function seteuc(fx){ bkup=document.charset; document.charset="euc-jp"; display(fx); document.charset=bkup; } function setsjis(fx){ bkup=document.charset; document.charset="shift_jis"; display(fx); document.charset=bkup; } function display(formx) { swin=window.open("","category_root",""); formx.target="category_root"; formx.submit(); swin.focus(); } function sitetop(ur) { swin=window.open(ur,"category_root",""); swin.focus(); } function search(eng) { q=document.fm.k.value; if(eng=="google") { if(q=="") sitetop("http://www.google.co.jp/"); else { fw=document.f_google; fw.q.value=q; setsjis(fw); }} } //--> </script>

  • サイト内検索について

    <form action="http://www.google.com/search"> <input type="hidden" value="hogehoge.jp" name="as_sitesearch" /> <input type="hidden" name="ie" value="Shift_JIS" /> <input type="hidden" name="oe" value="Shift_JIS" /> <input type="text" name="q" size="31" maxlength="256" value="" /> <input type="submit" name="btnG" value="Search!" /> </form> にて、グーグルの検索を使用してサイト内検索を使おうと思っておりますが、グーグルのアイコンは付けなくても宜しいでしょうか? もし、詳しい方お返事お待ちしております。 以上宜しくお願い致します。

    • ベストアンサー
    • HTML
  • クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。

    java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか? <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○ "; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・

  • 検索ファームの作り方について教えてください!

    検索をフォームを作成したく、下記ソースで作成したのですが、 検索ボタンを押してもうまくページが開きません。 色々調べてみたのですが原因がわからず困っております。 どなたか分かるかたがいらっしゃいましたら教えて頂きたく思います。 また間違ってる箇所の指摘と出来れば解答も頂ければ助かります。 よろしくお願いします。 <head> <script type="javascript"> <!-- function mySearch(frm) { var select = frm.elements["site"]; var sitename = select.options[select.selectedIndex].value; var word = frm.elements["word"].value; document.forms[sitename].elements[0].value = word; document.forms[sitename].submit(); //--> </script> </head> <html> 検索フォーム<br> <form name="google" method="get" action="http://www.google.co.jp/search"> <p><input type="hidden" name="q" value=""></p> </form> <form name="yahoo" method="get" action="http://search.yahoo.co.jp/search"> <p><input type="hidden" name="p" value=""></p> </form> <form lang="ja" onsubmit="mySearch(this); return false;"> <p>検索ワード<input type="text" name="word" size="30"> </p> <p>検索サイト <select name="site"> <option value="google">google</option> <option value="yahoo">yahoo</option> </select></p> <input type="submit" value="検索"> </form> <hr> </html>

  • サイト内検索で文字化けしていまいます

    "サイト内の検索にGoogle.comを使う方法" http://www.hyuki.com/netserv/google.html を教科書にして、サイト内検索窓を作りました。 少なくとも2006年11月の頃は、正常に動作していたのですが、 現在では、文字化けの不具合が発生しています。 1. 何故、不具合が起こったのか? 2. 対処法 の二点をご教授願います。 ○私のサイト 安部公房解読工房 http://www.geocities.co.jp/Bookend/2459/novel.htm ○サイト内検索に関するHTMLソース <HEAD>タグ内に <script> <!-- function addstring() { document.forms[0].q.value = 'site:www.geocities.co.jp ' + '安部公房 ' + document.forms[0].q.value; return true; } // --> </script> <BODY>タグ内に サイト内検索 (<A HREF="search.htm">検索の注意</A>はこちら) <form onSubmit="addstring()" action="http://www.google.com/search"> <INPUT type="hidden" name="hl" value="ja"> <input type="hidden" name="ie" value="Shift_JIS"> <input type="hidden" name="oe" value="Shift_JIS"> <input type="text" name="q" size="31" maxlength="256" value=""> <input type="submit" name="btnG" value="Google検索"> </form> 以上

  • 自作の検索エンジンを作りたいんですが

    <form action="http://www.amazon.co.jp/exec/obidos/external-search" target="_blank"> <input type=text name="keyword" size=31 maxlength=255 value=""> <input type="hidden" name="encoding-string-jp" value="日本語" /> <input type="hidden" name="mode" value="blended" /> <input type="hidden" name="tag" value="jojoagogo09-22" /> <form> と <form action="http://www.google.co.jp/search"> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <input type=hidden name=hl value="ja"> をくっつけて、1つのtextボックスからどっちで検索するかラジオボタンで選択してから検索ボタンで検索できるようにしたいです。 やり方だけでも構いませんが、もしよろしければサンプルや実際にくっつけたタグを回答していただけると凄く助かります。 どうかお願いします。

  • googleの検索を自分のHPにつけたが、入力した文字が消えてしまう

    http://www.google.co.jp/intl/ja/searchcode.html の「Google フリー検索 (ベーシック版) : ウェブ検索のみ」 を自分のHPにつけました。 ですが、ロゴやテーブルのタグは消して <form method=get action="http://www.google.co.jp/search"> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=ie value=Shift_JIS> <input type=hidden name=oe value=Shift_JIS> <input type=hidden name=hl value="ja"> <input type=submit name=btnG value="Google 検索"> </form> だけにして使用してみました。 それで、漢字などを入力しようと思い、ひらがなで入力し確定するためにエンターを押すと全て入力したのが消えてしまいます。 「おしえて」(破線の下線あり)   ↓ スペースを押す   ↓ 「教えて」(破線の下線あり)   ↓ エンターを押して確定しようとする   ↓ 「    」文字が無くなる といった感じになることがあります。 最初の頃は大丈夫だったような気がするんですが、 同じページ上に http://weather.yahoo.co.jp/weather/promo/blogparts/の天気予報のページと http://rss.tc/で取得したログパーツ を 貼り付けるようになった後から不安定になったような気がします。 両方のブログパーツともjavascript?とかいうものです。 原因がわかる方教えてほしいです。 グーグルのロゴは取ったらいけなかったのかな?とか タグを一部削除したからなのかな? とか思ってるんですが、 お分かりになる方いらしゃったら、ご指導願います。

  • 1つのformで複数のactionを実行できますか?

    フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか? フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・ スタイルシートではデザイン上無理でした。 <form id="fm" name="fm" action="URL" method="POST"> <input type="hidden" name="shouhinmei" value="商品名"> <input type="hidden" name="kakaku" value="500"> <input type="image" src="kounyuu.gif value="購入"> <form method=get action="http://www.google.co.jp/search"> <input type=hidden class="q" name=q value="商品名"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input name=btnG type="image" src="検索.gif value="検索"><input type=hidden name=sitesearch value="サイトのURL"></form> </form> </form> +----+  +----+ |購入|  |検索| +----+  +----+

専門家に質問してみよう