0

jQueryを使用して、クラスを追加/削除することでdivを表示および非表示にしています。

$('input').focus(function(){
    $(this).parents('.row').addClass("linksdiv");
}).blur(function(){
    $(this).parents('.row').removeClass("linksdiv");
});

入力に焦点を合わせると非常にうまく機能しますが、リンクをクリックするlinksdivとフォーカスが失われ、divが消えます。linksdivcssに依存するよりもshow（）とhide（）を使用する方が良いでしょうか？

入力がフォーカスされているときにdivをクリックできるようになりますか？または、linksdivがクリックされたときにフォーカスが失われないようにするための簡単な回避策はありますが、それでもぼかし時に消えますか？

よろしくお願いします！皆さんは素晴らしいです！

申し訳ありませんが、私がこれをやろうとしていたことをうまく説明できませんでした。http://jsfiddle.net/Zw5c2/5/ リソースを提供してくれたPatrickに感謝します。

4

2 に答える 2

0

入力にblurイベントを付加することはありません。ぼやけは多くの理由で発生し、望ましくない場合があります。

現在アクティブなフィールドの入力行を単純に強調表示することが目標である場合は、フォーカス内にロジックを追加して、一度に1つだけがクラスをdiv.row持つことができるようにします。linksdivあなたの場合：

$('input').focus(function() {
  var containing_div = $(this).parents('.row');
  var current_div = $('div.row.linksdiv');

  if (current_div && current_div != containing_div) {
    current_div.removeClass("linksdiv");
  }
  else {
    containing_div.addClass("linksdiv");
  }
});
于 2010-06-26T22:39:54.480 に答える
0

@ニックは正しいです、きれいな解決策はありません。

1つの可能性は、リンクのクリックハンドラーがフォーカスを入力に戻す機会を持つように、ぼかしのコードを遅らせることです。

http://jsfiddle.net/Zw5c2/

var lastInput;
var timeout;
$('input').focus(function() {
    var $th = $(this);
    lastInput = $th;
    clearTimeout(timeout);
    $th.parents('.row').addClass("linksdiv");
}).blur(function() {
    var $th = $(this);
    timeout = setTimeout(function() {
        lastInput = null;
        $th.parents('.row').removeClass("linksdiv");
    }, 150);
});

$('.link').click(function() {
    lastInput.focus();
    // run your code for the link
});

別の解決策は、リンクが実際に入力になるようにすることです。リンクのように見えるようにスタイルを設定し、テキストが変更されないようにします。

http://jsfiddle.net/Zw5c2/1/

どちらの解決策も完璧ではありません。

実装への変更はより良いかもしれません。

于 2010-06-27T13:16:11.620 に答える