2

いくつかの入力フィールドがあるフォームがあります。ユーザーが入力フィールドをクリックすると、そのフィールドのいくつかの選択とともに非表示のdivが表示され、オプションを選択できます。これがフィールド値として設定されます。

現在、divが非表示になる方法は、ユーザーがオプションを選択したときです。これは正常に機能しますが、ユーザーがオプションを選択したくない場合、divは削除されません。したがって、私の解決策は、入力フィールドでblurイベントを使用することでした。これにより、div要素が非表示になります。このようにして、ユーザーはフォームをタブで移動し、非表示のdivを表示して、そのフィールドを離れるときに非表示にすることができます。これも正しく機能します。

問題は、divから何かをクリックして入力に入力したいときに発生します。ぼかしを追加したので、ユーザーがdiv内のオプションをクリックしようとしたときにも発生し、ユーザーがクリックする少し前にdivを効果的に非表示にして、入力フィールドに何も追加しません。

この問題を解決するための最良の方法は何でしょうか？divを非表示にするblurイベントが欲しいのですが、ユーザーがdiv内をクリックしたい場合は、blurイベントがクリックしようとしているdivを非表示にしないという何らかの例外が必要です。

助けてくれてありがとう。

4

4 に答える 4

7

別の入力フィールドにフォーカスがある場合にのみ、blurイベントにタイムアウトを設定し、「helpdiv」をすぐに非表示にすることができます。

このようなもの：

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

もちろん、これをより一般的にすることもできますし、微調整を使用することもできますが、アイデアは得られます...

于 2009-09-15T19:20:16.917 に答える
0

Onblurで、対応するを非表示にする前に1秒待機するタイムアウトを設定しdivます。次に、onclickで、タイムアウトをクリアします。これが基本的な例です...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});
于 2009-09-15T19:20:45.967 に答える
0

そのフィールドの直後にタブストップ付きの閉じるボタンを追加します。これにより、秘密を知らない（タブスルーする）ユーザーが、オプションを選択せず​​にダイアログを閉じる方法があることに気付かない可能性があるという問題が解決されます。

于 2009-09-15T19:38:52.950 に答える
0

mousedownイベントを使用します。これは、ユーザーがヘルパー要素をクリックしたときにトリガーされますが、入力要素でblurイベントがトリガーされる前にトリガーされます。

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});
于 2013-01-10T23:49:13.743 に答える