是否可以在输入单词的那一刻触发事件(不使用输入字段)?
我正在处理的网站上的某些元素具有 .hidden_elements
类(显示:无)。在(在任何给定时间)输入“hello”这个词之后,如何将 class .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>
答案 0 :(得分:1)
好的。以下代码段有效。
需要采取以下步骤
The quick brown
。 this.value
上的 this.value
仍未定义body
收集键盘上输入的字符event.originalEvent.key
长度等于或大于 5 后,根据单词 'hello' 检查最后输入的 5 个字符buff
,它就会通过添加 hello
类来显示 divopen
$(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;
}
答案 1 :(得分:0)
$(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>