1

フォーカスがあるときはいつでも、テキスト ボックスの下に div を動的に配置する単純な jQuery プラグインを作成しています。すべてのブラウザでほぼ正しい位置を取得できました。

focusテキストボックスのおよびイベントにも 2 つのイベント ハンドラーをアタッチする必要がありblurます。問題なく動作しますが、問題はテキストボックスの下に配置された div をクリックしても閉じてしまうことです。テキストボックスがフォーカスを失ったためです。しかし、それが起こらないようにする方法はありますか?

これをblurイベントハンドラーにアタッチしてみました-

if($(mainElem).is(":focus")) return;

mainElemテキストボックスの下に表示されるdivはどこにありますか。

問題を説明するためのjsFiddle を次に示します。

4

2 に答える 2

1

これは、しばらく前にプロジェクトのために一緒に投げたフィドルです: http://jsfiddle.net/MYcZx/4/

それはあなたのフィドルに基づいているわけではありませんが (申し訳ありませんが)、機能はあなたが探しているものとほとんど同じであると信じています。私の例には入力フィールドは含まれていませんが、値を保持するスパンが含まれています。私はフォーカス/ぼかしを管理していませんが、スパンに tabIndex 属性を追加してから、フォーカスにトリガーを追加してメニューを開くことができます。

var $sub = $('.subscription');

$sub
    .on('click', '.remove', function() {
        $(this).parent().remove();    
    })
    .on('click', 'li', function(e) {
        var $this = $(this),
            $parent = $this.parent(),
            $options = $parent.children('li'),
            $value = $parent.siblings('.value'),
            isMulti = $parent.hasClass('multi'),
            values = [];

        if(!isMulti) {
            $options.removeClass('active');            
        }

        $this.toggleClass('active');

        $options.filter('.active').each(function() {
            values.push($(this).text());
        });

        $value.text(values.join(', ') || 'select');

        $value[(values.length ? 'add' : 'remove') + 'Class']('set');
    });

var $clone = $sub.clone(true);

$('.new')
    .on('click', function() {
        $(this).before($clone.clone(true));
    });
于 2013-08-12T22:03:16.900 に答える