web-dev-qa-db-ja.com

JavaScriptまたはjQueryを使用してフォーカスのあるフォーム入力を検出する

JavaScriptまたはjQueryを使用して、どのフォーム入力にフォーカスがあるかをどのように検出しますか？

関数内から、どのフォーム入力にフォーカスがあるかを判別できるようにしたいと思います。これをJavaScriptやjQueryで直接実行できるようにしたいのですが。

javascriptjqueryfocusforms
30
Everett Toews

これが最も効率的な方法かどうかはわかりませんが、次の方法を試すことができます。

var selectedInput = null;
$(function() {
    $('input, textarea, select').focus(function() {
        selectedInput = this;
    }).blur(function(){
        selectedInput = null;
    });
});
17
Paolo Bergantino

document.activeElement、これは長い間IEでサポートされており、FFの最新バージョンとchromeもサポートしています。フォーカスがない場合は、 document.bodyオブジェクト。

59
Juan Mendes

フォーカスを取得したときに特定のフォームフィールドのCSSを変更するだけの場合は、CSSの "：focus"セレクターを使用できます。これをサポートしないIE6との互換性のために、 IE7 ライブラリを使用できます。

3
Marc Novakowski

それ以外の場合は、onfocusイベントとonblurイベントを使用できます。

何かのようなもの：

<input type="text" onfocus="txtfocus=1" onblur="txtfocus=0" />

そしてあなたのJavaScriptにこのようなものを持っています

if (txtfocus==1)
{
//Whatever code you want to run
}

if (txtfocus==0)
{
//Something else here
}

しかし、それは私のやり方であり、10個の入力がある場合、それは極端に実用的ではないかもしれません:)

1
Maxime Kjaer

私はそれをこのようにします：送信された要素のIDが私のイベントをトリガーするものである場合に1を返し、他のすべての要素が0を返す関数を使用しました。フォールスルーし、何もしない：

function getSender(field) {
    switch (field.id) {
        case "someID":
        case "someOtherID":
            return 1;
        break;
        default:
            return 0;
    }
}

function doSomething(elem) {
    if (getSender(elem) == 1) {
       // do your stuff
    }
  /*  else {
       // do something else
    }  */
}

HTMLマークアップ：

<input id="someID" onfocus="doSomething(this)" />
<input id="someOtherID" onfocus="doSomething(this)" />
<input id="someOtherGodForsakenID" onfocus="doSomething(this)" />

最初の2つはイベントをdoSomethingで実行しますが、最後の2つは実行しません（または、コメントが外されている場合はelse節を実行します）。

-トム

1
vapcguy

ここにテキスト/パスワード/テキストエリアの解決策があります（フォーカスを取得できる他の人を忘れたかどうかはわかりませんが、if句を変更することで簡単に追加できます... ifの本体をフォーカスを取得できる適切な入力を決定する独自の関数）。

先史時代ではないブラウザー（http://www.caniuse.com/#feat=dataset）を使用しているユーザーに依存できると仮定します。

        <script>
        //The selector to get the text/password/textarea input that has focus is: jQuery('[data-selected=true]')
        jQuery(document).ready(function() {
            jQuery('body').bind({'focusin': function(Event){
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
                {
                    Target.attr('data-selected', 'true');
                }
            }, 'focusout': function(Event){
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
                {
                    Target.attr('data-selected', 'false');
                }
            }});
        });
    </script>

先史時代のブラウザでは、醜い人を使うことができます：

        <script>
        //The selector to get the text/password/textarea input that has focus is: jQuery('[name='+jQuery('body').data('Selected_input')+']')
        jQuery(document).ready(function() {
            jQuery('body').bind({'focusin': function(Event){
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
                {
                    jQuery('body').data('Selected_input', Target.attr('name'));
                }
            }, 'focusout': function(Event){
                var Target = jQuery(Event.target);
                if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
                {
                    jQuery('body').data('Selected_input', null);
                }
            }});
        });
    </script>
1
Magnitus

試す

window.getSelection().getRangeAt(0).startContainer
0
Vivek Viswanathan

イベントバブリングを使用する（そしてそれをドキュメントにバインドする）場合、必要なリスナーは1つだけです。ただし、フォームごとに1つは妥当です。

var selectedInput = null;
$(function() {
    $('form').on('focus', 'input, textarea, select', function() {
        selectedInput = this;
     }).on('blur', 'input, textarea, select', function() {
        selectedInput = null;
    });
});

（たぶん、あなたはselectedInput変数をフォームに移動する必要があります。）

0
user2211815

これを使えます

<input type="text" onfocus="myFunction()">

入力がフォーカスされると、関数がトリガーされます。

0
Kevin Cohen