音频重复超过一次

Question

我得到了两个值为“是”和“否”的文本框，当我在第一个文本框中键入“是”时，会发出哔哔声，其余文本框也会出现同样的情况。 当我在相应的文本框中输入正确的值时，声音应仅播放一次。 就我而言，声音一遍又一遍地重复...不知道是什么原因。

<input type="text" id="question"/>
<input type="text" id="question1"/> 
<audio src="beep.mp3" id="mp3" preload="auto"></audio>

function checkResults() {

    if ($('#question').val().toLowerCase() == 'yes') {
            document.getElementById("mp3").play();

    }

    if ($('#question1').val().toLowerCase() == 'no') {
        document.getElementById("mp3").play();
    }


}

$('input').blur(checkResults);

Answer 1

我相信这是由于窗口onblur事件引起的，您需要检查事件目标以确保其不是窗口优先对象。

<input type="text" id="question"/>
<input type="text" id="question1"/> 
<audio src="beep.mp3" id="mp3" preload="auto"></audio>
<script>
var isWindow = false;

function checkResults() {
    if (!isWindow) {
        if ($('#question').val().toLowerCase() == 'yes') {
            document.getElementById("mp3").play();
        }

        if ($('#question1').val().toLowerCase() == 'no') {
            document.getElementById("mp3").play();
        }
    }
}

$('input').blur(checkResults);

$(window).focus(function() {
    isWindow = false;
});

$(window).blur(function(e) {
    isWindow = true;
});
</script>