クリックに焦点を当てた要素を設定するにはどうすればよいですか？

Question

基本的に私はHTMLキーボードのトリガーを制御できるように、クリックするとフォーカスを合わせる必要があるHTML 5ビデオ要素があります。私は、テキストボックスをした私のvideo要素の他に

$(function(){ 
    var focused_vid; 
    $('.videoe').click(function(){ focused_vid = this }); 
    $(document).keydown(function(e){ 
     if (focused_vid){ 
      // keyboard handler 
     } 
    }); 
}); 

：

は、ここに私のコードです。

$(window).click(function(e) { 
    $(e.srcElement.className).focus(); 
}); 

よろしく:)

Answer 1

それはだevent.srcElementを使用しないでください：ビデオはそれは私のテキストボックスに入力するように私を無効に重点を置いて、私はしたにも関わらず、ビデオハンドラのキーボタンをトリガー保持されるとの問題がありますFirefoxがサポートしていない非標準IEプロパティです。現代のすべてのブラウザでサポートされているevent.targetを使用してください。 .blur()メソッドを試して、ビデオからfocusを離してください。どのようにこれを行うことができるかの例については、スニペットを参照してください。

SNIPPET

$(function() { 
 
    var focused_vid; 
 
    $('#vid1').click(function() { 
 
    focused_vid = this 
 
    }); 
 
    $(document).keydown(function(e) { 
 
    if (focused_vid) { 
 
     console.log('focused on ' + e.target.className); 
 
    } 
 
    }); 
 
}); 
 

 
$(window).click(function(e) { 
 

 
    $('#vid1').blur(); 
 
    var tgt = e.target; 
 
    $(tgt).focus(); 
 
    console.log('focused on ' + tgt.className); 
 

 
});

/* This just to prevent the console from obscuring the demo */ 
 

 
input { 
 
    display: block; 
 
} 
 
.as-console-wrapper.as-console-wrapper { 
 
    margin-left:270px; 
 
    max-width: 250px; 
 
    height: 100vh; 
 
    color: blue; 
 
    font: 400 15px/1.3 Consolas; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='inp1' class='txt' tabindex='2' placeholder="Enter this video's title"> 
 
<video id="vid1" class='vid' src="http://html5demos.com/assets/dizzy.mp4" controls tabindex='1' width='250'></video>

Answer 2

それはあまりにも他人を助けるかもしれません。

var focused_vid=null; 
$(function(){ 
    $('.videoe').click(function(){ focused_vid = this }); 
    $(document).keydown(function(e){ 
     if (focused_vid){ 
      // keyboard handler 
     } 
    }); 
}); 

function notfocused(){ 
    focused_vid=null; 
} 

以降に、私たちは、ビデオ用のキーボードボタンを取り扱う削除するnotfocusedメソッドを呼び出すことができます。

$(document).click(function(e) { 
    $('.videoe').blur(); 
    var tgt = e.target; 
    $(tgt).focus(); 
    if(tgt.className!="videoe") 
     notfocused(); 
});