プロが教える店舗&オフィスのセキュリティ対策術

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>

A 回答 (1件)

こんにちは。



前回の質問と同様の現象ということでよろしいでしょうか。
確かにこのソースですと再現させることが出来ました。

どうもCSSを設定する際にposition:absolute;を設定すると現象が起きるようです。

最初からabsoluteを設定しておくと再現しませんのでCSSでうまいこと対応できませんでしょうか。

==== 動作確認サンプル
http://hppg.moe.hm/okwave/qa/q7302800/

※根本の解決でなくもうしわけございません。ブラウザに起因する現象だと思います。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!