IME入力中にCSSを変更する方法とは？

前へ 次へ
このQ&Aのポイント
  • IME入力中にCSSを変更する方法について知りたいです。
  • javascriptを使用してIME入力中のレイアウトを変更したいですが、firefoxで一文字目が表示されない問題に遭遇しています。
  • どなたか解決方法を教えていただけないでしょうか？
回答を見る
  • ベストアンサー

ime入力中にcssを変更する方法

googleのように文字を入力したら、cssを変更して レイアウトを変更したいと考えております。 現在、jqueryを使ってcssを変更しているのですが、 firefoxで一文字目を入力すると表示されな現象に陥りました。 どなたかわかる方、ご教授お願いいたします。 <js>-------------------------------------------------------------------------------- $(function(){ var q=$('input#q'); q.focus(); q.keyup(function(e){ e.preventDefault(); ajax_search(); }); //Firefox IME q.bind('text',function(e){ e.preventDefault(); //console.log(this.value); ajax_search(); }); function ajax_search(){ if(q.val().length>0){ if(!$('#body').hasClass('search')){ q.css({margin:0,position:'absolute',top:'100px','zIndex':'999'}); } $('div#body').addClass('search'); } } }); </script> <html>-------------------------------------------------------------------------------- <div id="body"> <input type="text" name="q" id="q" value="" /> </div>

  • AJAX
  • 回答数1
  • ありがとう数0

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 前回の質問と同様の現象ということでよろしいでしょうか。 確かにこのソースですと再現させることが出来ました。 どうもCSSを設定する際にposition:absolute;を設定すると現象が起きるようです。 最初からabsoluteを設定しておくと再現しませんのでCSSでうまいこと対応できませんでしょうか。 ==== 動作確認サンプル http://hppg.moe.hm/okwave/qa/q7302800/ ※根本の解決でなくもうしわけございません。ブラウザに起因する現象だと思います。

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

関連するQ&A

  • 1つのファイル上で複数のjavascriptを作動

    ボタンを押したり、キーを入力すると別ファイルを呼び出すjavascriptがあります。 今回、同じページに同スクリプトを2つ設置しました。 ********************************************* 【Script1】 キーを入力すると./find.phpを呼び出す ********************************************* <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> ************************************************* Script 1 を呼び出すキー入力画面 ************************************************* <form id="searchform" method="post"> <input type="text" name="search_term" id="search_term"/> <input type="submit" value="全表示" id="search_button" /> </form> ********************************************* 【Script 2】 キーを入力すると./find_op.phpを呼び出す ********************************************* <script type='text/javascript'> $(document).ready(function(){ $("#search_results_op").slideUp(); $("#search_button_op").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term_op").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results_op").show(); var search_val=$("#search_term_op").val(); $.post("./find_op.php", {search_term : search_val}, function(data2){ if (data2.length>0){ $("#search_results_op").html(data2); } }) } </script> ************************************************* Script 2 を呼び出すキー入力画面 ************************************************* <form id="searchform_op" method="post"> <input type="text" name="search_term_op" id="search_term_op" /> <input type="submit" value="全表示" id="search_button_op" /> </form> ********************************************* 問題点 「Script 1 を呼び出すキー入力画面」上で文字を入力したりボタンを押したりすると、なぜかScript2が稼働してしまいます。 1つのページの中で、「Script 1」「Script2」がそれぞれ別々に稼働するためにはどこを変更すればよいでしょうか?

  • Firefoxで入力値のチェック

    テキストボックスへの入力値を即時でチェックし、値が不正だった場合はそのテキストボックスから抜けれないようにしたいと考えています。 以下のコードはIE6、Opera8.5では動作しましたが、Firefox1.5ではalertとselectはされるものの、focusがされず、結果テキストボックスから抜けてしまいます。 Firefoxで上記のことをするにはどうしたらよいのでしょうか。 <html> <head> <script type="text/javascript"> function validate(e){ var t = document.getElementById("txt1"); if(t.value == "a"){ alert("だめ！！"); if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } t.select(); t.focus(); return false; } } function bodyOnLoad(){ var t = document.getElementById("txt1"); addListener(t, "change", validate, false); } function addListener(e, evtname, func, foo){ if(e.addEventListener){ e.addEventListener(evtname, func, foo); }else if(e.attachEvent){ e.attachEvent("on" + evtname, func); } } </script> </head> <body onload="bodyOnLoad();"> <input type="text" id="txt1"> <input type="text" id="txt2"> </body> </html>

  • CSSでのレイアウト（Firefox向け）

    下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） 　　　┌──────────────┐ 　　　｜┌─────┐┌─────┐│ 　　　｜｜TEXT　　　　｜｜TEXT　　　　｜｜ 　　　｜｜　　　　　　　　｜｜　　　　　　　｜｜ 　　　｜└─────┘└─────┘│ 　　　└──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。

    • ベストアンサー
    • HTML
  • 【Javaxcript CSS】擬似フレームサイズをマウスで変更したい

    擬似フレームのサイズをマウスで変更したいです。 以前「CSSで指定したwidthをマウスで変更したい」 （http://oshiete1.goo.ne.jp/qa3849904.html） で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。 これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } </style> </head> <body> <script> window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } </script> <div id="f1">f1</div> <div id="f2"> <div id="space">&nbsp;</div> f2</div> </body> </html>

  • CSSで指定したwidthをマウスで変更したい

    frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか？ 具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } </style> </head> <body> <div id="f1">f1</div> <div id="f2">f2</div> </body> </html>

  • javascriptで外部cssの値の変更

    以下のような外部cssのjavascirptでの値の変更のしかたを教えて下さい a.css #head{ margin:0px; padding:0px; background-color:#ccffcc;←この値を変更したい } a.html <html> <head> <link rel="stylesheet" type="text/css" href="a.css" media="all" id="cssa"> </head> <body> <div id="head"></div> </body> </html>

  • inputの中身を書き換える方法について

    下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>

    • ベストアンサー
    • AJAX
  • フレーム内検索をCGI/CSS以外で実行する方法

    フレーム内検索をCGI/CSS以外で実行する方法はありますか？ ウェブページをフレームで作っているのですが、メニュー側に検索窓を設けて、メイン側（もしくはフレーム関係なく別タブ開いてもかまいません）に検索結果を表示したいと考えています。 とある人のソースを真似ているのですがその人はCGIで検索を行っていました。しかし私の使っているドメインはCGI非対応です。googleを利用した検索も試してみました。しかしフレームなしならうまくいくのですがフレームありではメインページが真っ白になるだけになります。 ちなみにそのときのソースは大体こんな感じです。 <html> <head> <script> <!-- function addstring() { document.forms[0].q.value = 'site:??.com ' + document.forms[0].q.value; return true; } // --> </script> <base target="main"> </head> <body> <form onSubmit="addstring()" action="http://www.google.com/search"> <input type="hidden" name="hl" value="ja" /> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <input type="text" name="q" size="31" maxlength="256" value="" /> <input type="submit" name="btnG" value="検索" /> </form> </body> </html> 不可能であるなら検索はあきらめることにします。 ご教授よろしくお願いします。

  • CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます；；

    Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。 FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel=stylesheet type="text/css" href="1.css"> <link rel="shortcut icon" href="favicon.ico"> <title>aaaaa</title> </head> <body> <div class="box"> <div class="top1"> <img src="aaa.jpg" width="468" height="60" alt="バナー"> </div> <div class="top2"> ああ <form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em"> <input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10"> <input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form> </div><div class="end"></div> <div class="bar"> <div class ="menu"><a href="./">HOME</a></div> <div class ="menu"><a href="about.htm">ABOUT</a></div> <div class="end"></div></div><div class="end"></div> <div class="side"> サイド </div> <div class="main"> メイン </div><div class="end"></div> </div></body> </html> 以下CSS @charset "utf-8"; /* ------------------------------ 基礎設定 ------------------------------ */ body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no -repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;} img {border:0;} address {font-style:normal;} /* ------------------------------ ページ枠組み設定 ------------------------------ */ .box {width:800; margin:0 auto 0 auto; text-align:left;} .main {width:80%; float:left; text-align:left; font-size:0.875em;} .side {width:20%; float:left; text-align:left; font-size:0.875em;} .top1 {width:50%; float:left; text-align:left; font-size:0.875em;} .top2 {width:50%; float:left; text-align:right; font-size:0.875em;} .bar {width:100%; height:41; text-align:center;} /* ------------------------------ クリアの設定 ------------------------------ */ .end {clear:both;} .end hr {display:none;} /* ------------------------------ メニューの設定 ------------------------------ */ .menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text- align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;} .menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}

    • ベストアンサー
    • HTML
  • ラジオボタンを選択したらテキストに数字入力

    ラジオボタンを選択してvalueが1だったら、テキスト欄（Q1_TEXT）に0を入力し、それ以外だったら何もしない、というJavascriptを書きたいです。ラジオボタンによって、テキスト欄の有効化、無効化に関する書き方は見つけられたのですが、このような挙動について見つけることができませんでした。 ご存じの方がおられましたらご教示いただけますと助かります。 よろしくお願いいたします。 <body> <form> <INPUT type="radio" name="Q1" value="1"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> </body>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する