webentwicklung-frage-antwort-db.com.de

Ermitteln Sie mit JavaScript oder jQuery, welche Formulareingabe den Fokus hat

Wie erkennen Sie, welche Formulareingabe mit JavaScript oder jQuery den Fokus hat?

Aus einer Funktion heraus möchte ich feststellen können, welche Formulareingabe den Fokus hat. Ich möchte dies in direktem JavaScript und/oder jQuery tun können.

30
Everett Toews

Ich bin nicht sicher, ob dies der effizienteste Weg ist, aber Sie könnten versuchen:

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

document.activeElement, wird seit langem in IE unterstützt, und die neuesten Versionen von FF und Chrome unterstützen es ebenfalls. Wenn kein Fokus vorhanden ist, wird das document.body-Objekt zurückgegeben.

59
Juan Mendes

Wenn Sie nur das CSS für ein bestimmtes Formularfeld ändern möchten, wenn es den Fokus erhält, können Sie den CSS-Selektor ": focus" verwenden. Zur Kompatibilität mit IE6, der dies nicht unterstützt, können Sie die Bibliothek IE7 verwenden.

3
Marc Novakowski

Ansonsten können Sie die Ereignisse onfocus und onblur verwenden.

so etwas wie:

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

und dann haben Sie so etwas in Ihrem Javascript

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

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

Aber das wäre einfach meine Art und Weise, und es wäre vielleicht nicht sehr praktisch, wenn Sie 10 Eingänge haben :)

1
Maxime Kjaer

Ich würde es so machen: Ich habe eine Funktion verwendet, die eine 1 zurückgeben würde, wenn die ID des Elements, das es gesendet wurde, eine solche war, die mein Ereignis auslöste. Alle anderen würden eine 0 zurückgeben, und die "if" -Anweisung würde dann einfach die Antwort geben durchfallen und nichts tun:

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-Markup:

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

Die ersten beiden werden das Ereignis in doSomething durchführen, die letzten nicht (oder die else-Klausel, wenn sie unkommentiert sind).

-Tom

1
vapcguy

Hier ist eine Lösung für Text/Passwort/Textarea (nicht sicher, ob ich andere vergessen habe, die fokussiert werden können, aber sie können leicht durch Ändern der if-Klauseln hinzugefügt werden.) Eine Verbesserung des Designs könnte durch das Einfügen des if-Körpers erreicht werden eigene Funktion zur Ermittlung geeigneter Eingänge, die den Fokus erhalten können).

Angenommen, Sie können sich darauf verlassen, dass der Benutzer einen Browser verwendet, der nicht vorhistorisch ist (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>

Für vorhistorische Browser können Sie die hässlicheren verwenden:

        <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

Versuchen

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

Sie benötigen nur einen Listener, wenn Sie Ereignisblubbern verwenden (und es an das Dokument binden). Eine pro Form ist jedoch sinnvoll:

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

(Vielleicht sollten Sie die ausgewählte Eingabevariable in das Formular verschieben.)

0
user2211815

Sie können dies verwenden

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

Es löst die Funktion aus, wenn die Eingabe fokussiert ist.

0
Kevin Cohen