代码之家 › 专栏 › 技术社区 › fantastic name

未在文本框中键入内容时,暂停按键上的HTML<视频>标记

html5-video video html javascript

fantastic name · 技术社区 · 7 年前

目前,我有这个,这很好,但我在视频下有一个文本框,当人们尝试键入其中一个字母或字符时,它会做一些事情(比如暂停或取消暂停视频),现在我试图找到一种方法来检测用户何时在文本框中键入内容,但它似乎从来都不起作用。

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

1 回复 | 直到 7 年前

traktor 7 年前

方法1-侦听textarea事件

您可以将按键事件处理程序添加到文本区域并停止按键编程。这样,事件就不会跳转到窗口侦听器并由其处理。

本例仅选择 <textarea> 元素,并阻止除制表符以外的任何内容进一步扩展(通常不能在输入中键入制表符)。您可以根据需要添加id属性并使用不同的选择器:

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

注意:当文本区域DOM元素已经创建并存在时,需要注册侦听器。将HTML放在脚本标记之前是实现这一点的一种方法。

方法2-忽略textarea事件

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

$(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中是大写的。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前