Question

目前，我有这个，这很棒，但我在视频下面有一个文本框，当人们尝试输入其中一个字母或字符时，它会做一些事情（比如暂停或取消暂停视频），现在我＆＃39 ; ve试图找到一种方法来检测用户何时在文本框中输入，但它似乎似乎没有工作。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$(window).keypress(function(e) {
  var video = document.getElementById('vid');
	var timeback = vid.currentTime - 5;
	var timeforward = vid.currentTime + 5;
	var volumeup = vid.volume + 0.5;
	var volumedown = vid.volume - 0.5;
  if (e.which == 107) {
    if (vid.paused == true)
      vid.play();
    else
      vid.pause();
  }
	if (e.which == 106) {
      vid.currentTime = timeback;
  }
	if (e.which == 108) {
      vid.currentTime = timeforward;
  }
	if (e.which == 109) {
	if(vid.muted == false){
		vid.muted = true;	
	}else{
		vid.muted = false;
	}	
  }
	if (e.which == 46) {
      vid.volume = volumeup;
  }
	if (e.which == 44) {
      vid.volume = volumedown;
  }
});

</script>
    <div align='center' class='embed-responsive embed-responsive-16by9'>
    <video id='vid' controls class='embed-responsive-item vid' onclick='this.paused ? this.play() : this.pause();'>
        	<source src='http://techslides.com/demos/sample-videos/small.mp4' type='video/mp4'>
    </video>
</div>

<div class='form-group'>
	<form method='get' enctype='multipart/form-data'>
  <label for='comment'>Comment on this video:</label>
  <textarea name='comment' class='form-control textbox' rows='5' id='comment'></textarea>
  <input type='submit' class='btn btn-primary' value='Submit'>
</form></div>

＆＃13;

Answer 1

方法1 - 侦听textarea事件

您可以向textarea添加按键事件处理程序并停止按键操作。这样，事件就不会冒泡到窗口监听器并被它处理。

此示例只选择一个<textarea>元素，并防止除TAB之外的任何内容进一步发展（通常您无法在输入中键入TAB）。您可以添加id属性并根据需要使用其他选择器：

$("textarea").on( "keypress", function(e) {
    if(e.key !== "TAB") {
         e.stopPropagation();
    }
});

请注意，在创建并存在文本区域DOM元素时，需要注册侦听器。在脚本标记之前将HTML放在帖子中是实现此目的的一种方式。

<小时/>

方法2 - 忽略textarea事件

或者，您可以像往常一样允许事件冒泡DOM，如果最初在textarea或input元素上触发它们，则添加代码以忽略它们：

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

    switch(e.target.tagName) {
        case "TEXTAREA":
        case "INPUT":
            return;  // do not process event at all
    }

        var video = document.getElementById('vid');
        // ... the video playback handler
});

该方法具有很大程度上独立于页面设计的优点。它不需要为可以键入的标准元素（textarea和input）添加特殊事件处理程序，并且如果在此类元素上触发了按键，则立即返回。注意标记名称在DOM中是大写的。

在不键入文本框时，在按键上暂停HTML <video>标记

1 个答案:

方法1 - 侦听textarea事件

方法2 - 忽略textarea事件