开发者

How can I check with JQuery, if a certain word is typed in the Browser?

T开发者_StackOverflow中文版his is a funny one, I want to display a certain div on a website only if a secret word is typed on that page (no forms are present). What is the easiest way to accomplish this with JQuery? Are there any Plugins? Thanx in advance cheers Tabaluga


if ( window.addEventListener ) {
        var kkeys = [], konami = "68,73,78,78,69,82"; //this spells dinner
        window.addEventListener("keydown", function(e){
                kkeys.push( e.keyCode );
                if ( kkeys.toString().indexOf( konami ) >= 0 ) {
                    // run code here    
                    $("#text").hide().fadeIn("slow").html('Now the website will appear.');
                }
        }, true);
}

you can check what letters are what by doing:

if ( window.addEventListener ) {
    window.addEventListener("keydown", function(e){
        $("#text").append(e.keyCode + " ");
    }, true);
}


try using js-Hotkey jquery plugin:

$(document).bind('keydown', 's+e+c+r+e+t', fn);

Also you may want to inspect through KonamiCodeWebsites to see how it works:

In this website you need to enter konami code (UP + UP + DN + DN + LFT + LFT + RGT + RGT + B + A) in order to enter the website!


Pure javascript:

var typedWord = '';
window.addEventListener('keypress', function(e){
  var c = String.fromCharCode(e.keyCode);
  typedWord += c.toLowerCase();
  if(typedWord.length > 4) typedWord = typedWord.slice(1);
  if(typedWord == 'jogo') alert('JOGO');
});

http://codepen.io/rafaelcastrocouto/pen/xeGps


HTML:

<div style="display: none" class="secret">Correct password!</div>

JS:

var pass="password";
var typed="";

$(document).keypress(
    function (e) {
       typed += String.fromCharCode(e.which);

       if (typed===pass) {
           $('.secret').show();
       }
    }
);

If you're familiar with Javascript closures you can get rid of the global variables like this:

$(document).keypress((function(e) {
    var pass = "password";
    var typed = "";

    return function(e) {
        typed += String.fromCharCode(e.which);

        console.log(typed);
        if (typed === pass) {
            $('.secret').show();
        }
    };
})());


Here is an example of what you can do: http://jsfiddle.net/Akkuma/CGmnw/

This is a prototype for clarification. Basically what this is doing is it maintains an array of keycodes that must be pressed in that order. It then increments the checking and resets when an incorrect key is detected or time runs out to enter it.

The prototype offers both resetting on incorrect keypress and after a certain amount of time elapsed.


Sounds like you need to listen to keyboard events.

$(document).ready(function(){
    var currentKey = 0;
    var validKeyArray = [22,23,24]; //list of valid keys to listen to in order
    $('body').keyup(function(event) {
        if (event.keyCode == validKeyArray[currentKey]){
            currentKey ++;
        } else {
            currentKey = 0;
        }
        if (currentKey == validKeyArray.length){
           // SUCCESS! Do your magic div right here!
           // console.log('SUCCESS!');
        }

    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜