是否可以通过键入一个单词来触发事件

Question

是否可以在键入单词时触发事件(不使用输入字段(？

我正在开发的网站上的一些元素具有类.hidden_elements(显示：无(。如何将类.open(display:block(添加到单词"之后(在任何给定时间(的那些隐藏元素；你好"；已键入。

我一直在尝试这种方法，但没有运气：

$(document).ready(function() {
'use strict';
$('body').on('keyup', function() {
if(this.value.trim().toLowerCase() == 'hello'){
$('.hidden_elements').addClass('open');
}
});
});

.hidden_elements {
display:none;
}
.open {
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden_elements">I am hidden</div>
<div class="hidden_elements">I am hidden</div>

Answer 1

好的。下面的代码段已经起作用。

将采取以下步骤

1. 读取事件数据本身，而不是this.value。body上的this.value保持未定义
2. 收集使用event.originalEvent.key在键盘上键入的字符
3. 缓冲区buff长度等于或大于5后，对照单词"hello"检查最后5个输入的字符
4. 一旦输入hello，它就会通过添加open类来显示div

$(document).ready(function() {
'use strict';
let buff = '';
$('body').on('keyup', function(event) {


buff += event.originalEvent.key;
// console.log('buff.length', buff.length, buff);
if (buff.length >= 5) {
const lastFive = buff.substr(buff.length - 5);
if(lastFive.toLowerCase() == 'hello') {
$('.hidden_elements').addClass('open');
}
}
});
});

.hidden_elements {
display:none;
}
.open {
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden_elements">I am hidden</div>
<div class="hidden_elements">I am hidden</div>

Answer 2

$(document).ready(function () {
(function () {
'use strict';
var typed = "", observe = "hello";
$(document).on('keypress', function (e) {
typed += String.fromCharCode(e.keyCode || e.which).toLowerCase();
if (observe.indexOf(typed) != 0) {
typed = "";
}
if (observe == typed) {
$('.hidden_elements').addClass('open');
typed = "";
}
});
}());
});

.hidden_elements {
display: none;
}
.open {
display: block;
}

<p>Type Hello</p>
<div class="hidden_elements">I am hidden</div>
<div class="hidden_elements">I am hidden</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>