Question

基本上我是一个HTML 5视频元素，点击后我需要将其聚焦，以便控制用户键盘触发器。

这是我的代码：

$(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远离视频。请参阅代码段，了解如何完成此操作。

<强>段

$(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();
});

如何设置一个专注于点击的元素？

2 个答案: