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>
No.1ベストアンサー
- 回答日時:
こんにちは。
前回の質問と同様の現象ということでよろしいでしょうか。
確かにこのソースですと再現させることが出来ました。
どうもCSSを設定する際にposition:absolute;を設定すると現象が起きるようです。
最初からabsoluteを設定しておくと再現しませんのでCSSでうまいこと対応できませんでしょうか。
==== 動作確認サンプル
http://hppg.moe.hm/okwave/qa/q7302800/
※根本の解決でなくもうしわけございません。ブラウザに起因する現象だと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryのblockUIをformのボタン...
-
AjaxでJSONを受信すると、文字...
-
jQuery3 reset()が効かない。
-
Ajax・jQueryでGETとPOSTする方法
-
jQuery.getの引数dataで動的に...
-
AJAXでPHPの配列を用いたセレク...
-
Javascriptを使ってQRコード読...
-
IndexedDB を使ってファイルア...
-
毎日午前0時にhtmlを切り替えた...
-
jQuery toggle() 戻るで開いた...
-
Superfishの最終項処理について
-
JavaScriptでtabindexの変更っ...
-
同一ページ移動時ハンバーガー...
-
Selenium4でボタンをクリックで...
-
JQueryでAjax通信をキャンセル...
-
jQueryで追加した要素がマウス...
-
slideToggleを複数のボタンで適...
-
アコーディオンメニューをブラ...
-
SQLのmaxで求めた値を変数に代...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
-
ajaxからphpにpsotしたときの日...
-
ajax + PHPによるエラーの返し...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
jQueryで外部テキストファイル...
-
Ajax・jQueryでGETとPOSTする方法
-
jQuery3 reset()が効かない。
-
Ajaxについて
-
Ajax サーバーに負荷かかります...
-
jQuery を外部ファイルから呼び...
-
フォームデータの受取り方
-
ajaxでPHPにPOST送信して結果デ...
-
jQuery,Ajaxでcgiに接続する方...
-
ajaxでPHPにPOST送信して結果デ...
-
AJAXでPHPの配列を用いたセレク...
-
Ajax を Fetch API に 書き換え...
-
Perl JavaScript Ajax リアルタ...
-
eval、$.eachで順番が入れ替わ...
おすすめ情報