我有两个文本框,其值为"is"和“否”。当我在第一个文本框中输入"is"时,它会发出蜂鸣声,其余文本框也会发生同样的情况。当我在相应的文本框中输入正确的值时,声音应该仅播放一次。
就我而言,声音一次又一次地重复......我不知道可能是什么原因。
<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);
最佳答案
由于您正在检查 blur
事件,因此声音会多次播放,因此每次用户模糊出框时,只要框内有正确答案,声音就会重播。相反,您应该检查 keyup
事件。
示例:
var answers = {
'question': 'yes',
'question1': 'no'
};
function checkResults() {
var $this = $(this), val = $this.val().toLowerCase();
for (var k in answers) {
if (answers.hasOwnProperty(k)) {
if (answers[$this.attr('id')] && answers[$this.attr('id')] === val) {
play();
}
}
}
}
function play() {
var sound = document.getElementById('mp3');
sound.pause();
sound.currentTime = 0;
sound.play();
}
$('input').on('keyup', checkResults);
JSFiddle 演示
关于javascript - .blur() 声音通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25350661/