Question

我正在尝试在我的网站上实现一项功能。当用户在键盘上以定义的顺序书写字母时，我们的想法是拥有某种复活节彩蛋。

用户必须直接在网站上写这个，而不是在textarea或类似的东西。

我想过使用jquery .onkeypress函数，但是这个函数需要一个选择器，我不确定在没有输入的情况下可以使用它。

然后我需要存储用户在某些字符串中按下的键，并在用户按下除给定字符串之外的其他键时重置字符串。

＆＃39; QWERTY＆＃39;是默认字符串，如果用户写'qwo＆＃39;它会重置字符串

代码必须尽可能隐藏。一旦用户写出完全正确的字符串，它就会触发类似警报的内容，但我知道如何做这个部分。我的问题是javascript / jquery函数。

感谢任何帮助，我在询问之前已经在Google上进行了大量搜索，但我甚至不知道写些什么来找到这样的内容。

谢谢！

Answer 1

我也会发布我的实施，尽管其他的更快。 :) 我更喜欢使用闭包来隐藏状态，简单的字符串函数可以轻松解决这个问题。所以改变qwerty＆＃39;对于其他一些字符串，你只需要更改变量strTotype，也就是说这可以很容易地放入构造函数中。

window.addEventListener( 'keypress', (function() {
    var strToType = 'qwerty',
        strTyped = '';
    return function( event ) {
        var character = String.fromCharCode(event.which);
        strTyped += character;
        if (strToType.indexOf(strTyped) === -1) strTyped = '';
        else if (strTyped === strToType) {
            strTyped = '';
            alert('activate easteregg here');
        }
    };
}()) );

Answer 2

您可能需要考虑window.addEventListener()或document.addEventListener()（Vanilla Javascript）

Answer 3

我用jQuery做了一些接近这个的事。

我实现了＆＃34; qwerty＆＃34;的逻辑已经

＆＃13;

let progress = 0;

$(window).bind('keydown', function(event) {
    let key = String.fromCharCode(event.which).toLowerCase();
    switch (String.fromCharCode(event.which).toLowerCase()) {
        case 'q':
            progress += (progress == 0 ? 1 : 0);
            break;
        case 'w':
            progress += (progress == 1 ? 1 : 0);
            break;
        case 'e':
            progress += (progress == 2 ? 1 : 0);
            break;
        case 'r':
            progress += (progress == 3 ? 1 : 0);
            break;
        case 't':
            progress += (progress == 4 ? 1 : 0);
            break;
        case 'y':
            progress += (progress == 5 ? 1 : 0);
            if(progress == 6)
                printKeyToHtml("You did it");
            break;
        default:
            progress = 0;
            break;
            
    }
});

function printKeyToHtml(key) {
    $(".output").append(key);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">Get Easter, egged!</div>
<div class="output"></div>

＆＃13;

Answer 4

以下是使用es6的示例。

我们使用matched值来了解我们当前匹配字符的数量。

const matchWord = (word, callback) => {
  let matched = 0
  const onKeyPress = e => {
    // convert the keycode to the character
    const char = String.fromCharCode(e.which)
    console.log(char)
    // check if the current character is the expected character
    if (word.charAt(matched) === char) {
      // move on to the next character
      matched++
    }
    else {
      // reset the counter
      matched = 0
    }
    if (matched === word.length) {
      callback(e, word)
      matched = 0
    }
  }
  window.addEventListener('keypress', onKeyPress, true)
}

matchWord('qwerty', (e, word) => {
  console.log(`you typed ${word}`)
})

写入字符串时的easteregg

4 个答案: