web-dev-qa-db-fra.com

Détecter la mise au point initiée par la touche de tabulation?

Je souhaite détecter l'événement focus d'un élément, mais uniquement s'il a été déclenché par l'utilisateur en appuyant sur la touche de tabulation. Par exemple:

<input type="text" id="foo" />
<input type="text" id="detect" />

Si l'utilisateur se concentre sur #foo et presses Tab, Je veux que l'événement se déclenche une fois #detect devient focalisé (ou un conditionnel à l'intérieur de l'événement focus pour être vrai). Inversement, si l'utilisateur clique simplement sur le #detect champ pour le concentrer, je ne veux pas que l'événement se déclenche (ou je veux que le conditionnel à l'intérieur de l'appel à l'événement focus soit faux).

Je ne veux pas utiliser l'événement keydown de #foo et vérifiez si la touche de tabulation a été enfoncée, car je veux que l'approche soit indépendante de tout autre élément.

J'ai regardé la sortie console du code suivant, mais je n'ai pas remarqué de réelle différence entre les deux méthodes de mise au point:

$('#detect').on('focus', function(e){
   console.log(e); 
});

( violon )

Est-ce possible d'accomplir d'une manière relativement simple?

javascriptjqueryjavascript-eventsevent-handling
37
DC_

Je sais que vous avez accepté une réponse, mais vous pouvez tester le bouton enfoncé en utilisant ce qui suit:

$('#detect').on('focus', function(e){
    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9) {
           alert('I was tabbed!');
        }
    });
});

http://jsfiddle.net/LPGLm/1/

Modifier: changez l'auditeur autour:

$(window).keyup(function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 9 && $('#detect:focus').length) {
        alert('I was tabbed!');
    }
});

http://jsfiddle.net/LPGLm/7/

43
Pete

Une solution plus réactive serait d'utiliser deux écouteurs:

var mousedown = false;
$('#detect').on('mousedown', function () {
    mousedown = true;
});

$('#detect').on('focusin', function () {
    if(!mousedown) {
        // logic
    }
    mousedown = false;
});

Violon montrant la différence de vitesse:

http://jsfiddle.net/u2y45/1/

7
Gary

Comme vous l'avez remarqué, l'objet événement lui-même ne distingue pas les moyens d'accès. Ce que vous pouvez faire est de lier un écouteur mousedown, qui se déclenchera avant focus, et de définir un indicateur d'horodatage que vous comparerez à une valeur de seuil dans votre focus gestionnaire.

1
David Hedlund
<input type="text" id="foo" />
<input type="text" id="detect" />
<script>
 $("#foo").on('keyup', function(){    
   document.getElementById("detect").value = "007";  
    alert("your tab active successfully");  
   });  
 </script>
0
Purvesh Tejani

Vous pouvez vérifier l'événement focus sur une entrée spécifique par ce code

$(window).on('keyup', function(event){
    if(event.keyCode == '9'){

      getFocused(event);
    }

})
var focused = 0;
function getFocused(e){
var ida =  $(':focus').eq(0).prop('id');
    if(ida=='detect' && focused==0){
        focused = 1;
        console.log(e);
    }
}

(violon)

0
user617263