javascript - 如何在整个网页上绑定按下空格事件,并在输入框里按空格不会触发?
伊谢尔伦
伊谢尔伦 2017-04-11 13:13:01
0
4
835

我想做个电台网站,按下空格播放/暂停

document.onkeydown = function(event){
    if (event.keyCode == "32") {
        if ($(".jp-pause").css('display') == 'none') {
            //如果暂停按钮不显示 未播放
            $(".jp-play").click();
        }else {
            //如果暂停按钮显示 播放中
            $(".jp-pause").click();
        }
    }
}

但是在<input>标签中按空格也会触发

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(4)
巴扎黑
document.onkeydown = function(event){
    if (event.keyCode === 32) {            
        if(event.target.nodeName !== "INPUT"){
            if ($(".jp-pause").css('display') == 'none') {
                //如果暂停按钮不显示 未播放
                $(".jp-play").click();
            }else {
                //如果暂停按钮显示 播放中
                $(".jp-pause").click();
            }
        }
    }
}
刘奇

事件中判断input是否获得焦点,document.activeElement;

小葫芦

jquery方法:$(':focus').length

document.onkeydown = function (event) {
    if (event.keyCode == "32") {
        if ($(':focus').length == 0) {
            alert("暂无获得焦点的元素");
        }
    }
}

js方法:

document.onkeydown = function (event) {
    if (event.keyCode == "32") {
       var x = document.activeElement.tagName;
        if (x == "INPUT" || x=="TEXTAREA") {
            alert("暂无获得焦点的元素");
        }
    }
}

其他:
1.还有如果页面输入框不多的话可以定义变量控制
2.还有onkeydown是按住不放的事件,好像不是按一次,具体也不是很懂你可以查查
3.关于JS的document.activeElement

刘奇

下面哪种不可以,那么换一种,只有body这里有onkeydown事件,然后去判断e.target(触发事件的对象,如果是input就执行input如果不是else body 的)

你用相同的onkeydown事件,body和input都绑定。你在input上写阻止冒泡stopPropagation(),不就不会冒泡到上面了吗?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template