Javascript 使用键盘输入序列显示隐藏/不可见表单输入 TL;博士
我希望表单输入在用户按特定的键序列后变得可见。有没有简单的解决办法?有可能吗?我有什么需要注意的吗Javascript 使用键盘输入序列显示隐藏/不可见表单输入 TL;博士,javascript,jquery,Javascript,Jquery,我希望表单输入在用户按特定的键序列后变得可见。有没有简单的解决办法?有可能吗?我有什么需要注意的吗 背景 我想在我的代码中隐藏一些复活节彩蛋让其他开发人员找到可能会很有趣 我想到的一个是一个可选的表单输入,它只能在按顺序按下一系列键时显示(如“显示”或定向输入模式)。我想要一种方式,无论哪个元素处于焦点,都能检测到模式 一些并发症 在寻找解决方案和阅读之后,很明显,尽管这个问题听起来很简单,但它可能是一个巨大的、耗时的错误,我会后悔把我的生命投入了几个小时 检测用户键盘输入是一回事,但是检查
背景 我想在我的代码中隐藏一些复活节彩蛋让其他开发人员找到可能会很有趣 我想到的一个是一个可选的表单输入,它只能在按顺序按下一系列键时显示(如“显示”或定向输入模式)。我想要一种方式,无论哪个元素处于焦点,都能检测到模式
一些并发症 在寻找解决方案和阅读之后,很明显,尽管这个问题听起来很简单,但它可能是一个巨大的、耗时的错误,我会后悔把我的生命投入了几个小时 检测用户键盘输入是一回事,但是检查每个连续的按键是否按正确的顺序是我力所不及的
潜在的备份解决方案 对于其他有此问题的人:我提出了一系列利用JS/jQuery的潜在备份方法,可以用来显示输入,但没有一种方法接受定向输入,它们打破了我最初的一个或多个要求
- 使用accesskey属性将焦点设置为隐藏锚定和显示 输入字段
- 使用onload事件在不可见表单输入上设置焦点
- 将可见输入的值设置为特定值时显示输入 价值观
- 单击隐藏的div使其显示
- 将焦点设置为在URL字符串中使用其ID
var按键=[];
文件。添加的文件列表器(“键控”,功能(e){
按键。按下(e键);
if(keypress.slice(-3).join(“”==“abc”){
警惕(“复活节彩蛋!”);
}
});
解释
变量初始化为保存键入键的历史记录keypresss
- 每次事件触发时:
- 键入的密钥将加载到历史记录中
- 最后3个键入的键将被合并成一个字符串以进行简单比较:
keypresss.slice(-3).join(“”)
- 连接的字符串将根据代码进行检查(
,在我的示例中)。如果匹配,则执行abc
语句体中的代码。有趣的是:我在键入此部分时被一个警报打断,因为我在该页面上测试了我的代码If
- 无论关注的UI元素是什么,这都应该起作用,因为事件直接在文档上
- 如果用户可能在单个页面上花费大量时间并按了很多键,则可能需要定期清除
变量。当我输入这篇文章时,在我的keypresss
变量中有这篇文章的完整副本按键
var按键=[];
文件。添加的文件列表器(“键控”,功能(e){
按键。按下(e键);
if(keypress.slice(-3).join(“”==“abc”){
警惕(“复活节彩蛋!”);
}
});
解释
变量初始化为保存键入键的历史记录keypresss
- 每次事件触发时:
- 键入的密钥将加载到历史记录中
- 最后3个键入的键将被合并成一个字符串以进行简单比较:
keypresss.slice(-3).join(“”)
- 连接的字符串将根据代码进行检查(
,在我的示例中)。如果匹配,则执行abc
语句体中的代码。有趣的是:我在键入此部分时被一个警报打断,因为我在该页面上测试了我的代码If
- 无论关注的UI元素是什么,这都应该起作用,因为事件直接在文档上
- 如果用户可能在单个页面上花费大量时间并按了很多键,则可能需要定期清除
变量。当我输入这篇文章时,在我的keypresss
变量中有这篇文章的完整副本按键
var keypresses = [];
document.addEventListener('keyup', function(e) {
keypresses.push(e.key);
keypresses = keypresses.slice(-3);
if (keypresses.join("") === "abc") {
alert("easter egg!");
}
});
我只是想扩展一下关于定期清除keypresss变量的最佳答案,我只是添加了第4行,我想这样keypresss只会记住最后3个键(或者不管作弊代码的长度是多少),并丢弃其他键:
var keypresses = [];
document.addEventListener('keyup', function(e) {
keypresses.push(e.key);
keypresses = keypresses.slice(-3);
if (keypresses.join("") === "abc") {
alert("easter egg!");
}
});
$(文档)。在(“keydown”上,
保留已按下按键的记录,如果当前按键不是预期按键,则重置记录。此外,添加setTimeout()
以在延迟后清除记录(例如1s)。您可以很容易地做到这一点。下面是一个示例,用于侦听DOM中的Konami代码:用户可以始终按F12。$(文档)。在(“keydown”上,
保留已按下的键的记录,如果当前键不是预期的键,则重置该记录。此外,添加一个setTimeout()
在延迟后(例如1s)清除记录。您可以非常轻松地执行此操作。下面是一个示例,用于侦听DOM中的Konami代码:用户始终可以按F12键。