0

マウスが要素の上に置かれたときに表示される非表示の連絡先フォームを作成しています。これは非常に簡単で、次のようにして達成しました。

$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

ここでの問題は、ユーザーが入力要素またはテキストエリアに移動して詳細を書き始めると、マウスがコンテナーの外に移動する可能性があることです (そうなる可能性が非常に高いです)。

この場合、フォームが非表示にならないようにするにはどうすればよいですか?

「ホバー」関数内にいくつかの条件関数 (if/else) を追加すると思いますが、現在のテキスト カーソル位置を取得するにはどうすればよいですか?

お問い合わせフォーム ( ) には、ID 内に , , , の#contact_14 つの要素が含まれています。#cf_name#cf_email#cf_phone#cf_text

注意: ユーザーが「表示/非表示」ボタンをクリックする必要がないようにしたい

*単純なクエリかもしれませんが、明確な答えがどこにも見つかりません。

------------------------------

解決：

以下の Diodeus のヘルプのおかげで、次のように解決できました。

すべての入力にはonfocus/onblurアクションがあります。

<input type="text" id="cf_name" class="text" name="name" onfocus="allowcfhide=false;" onblur="allowcfhide=true;" />

ホバー スクリプトが変更されました。

var allowcfhide=true;
$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right: -218}, 500); });
  });
});
4

1 に答える 1

0

アニメーションの開始時に、アニメーションを戻すフラグを設定します。いずれかの入力がフォーカスされたら、フラグを設定します。

于 2012-09-20T19:08:04.090 に答える