Detecting key press sequence in JavaScript

Question

I have above script, CheckFiddle or below

<script type="text/javascript">
    function check(e){
        var text = e.keyCode ? e.keyCode : e.charCode;
                 
         switch(text){
         case 81:
            text = '&#4632;';
            break;
        case 87:
            text = '&#4633;';
            break;
        case 69:
            text = '&#4634;';
            break;
        case 82:
            text = '&#4635;';
            break;
        case 84:
            text = '&#4636;';
            break;
        case 89:
            text = '&#4637;';
            break;
        case 85:
            text = '&#4638;';
            break;
}
    
    if(text == 8){
        
        var str = document.getElementById("out").innerHTML;
        var foo = str.substring(0, str.length -1);
        document.getElementById("out").innerHTML = foo; 
    }else {
        document.getElementById("out").innerHTML += text;
    }

    }
    
</script>
<input  type='text'  onkeyup='check(event);' id='in' />
    
<div id='out' ></div>

Which changes only some of the qwerty letters to another unicodes as they get typed. meaning, each letter gets converted to another letter, but the problem is, there are some letters that can only be created with a combination of two key strokes, together or separately. i.e.

when you press m then quickly, o it should generate x;
or when you press shift + p it, it should generate y

The problem, here is that the code only recognized one letter per stroke. I tried using:

if(text == 77+79){  // this is for m + o
text 'x';
}

or even for the shift + p which should output z. I the above argument it inside, but it is not working.

Already posted try this http://stackoverflow.com/questions/7479307/how-can-i-detect-shift-key-down-in-javascript — JDGuide, May 09 '13 at 02:51
Detecting a sequence of key presses (`m` is pressed and released, then `o` is pressed => `x`) would be different to detecting a key combination (`shift` + `p` simultaneously). How to do these two are very different questions. The latter seems already answered as @JDeveloper has pointed out; you should ask the former separately (it may already be answered too). — doppelgreener, May 09 '13 at 02:55

svidgen · Answer 1 · 2013-05-09T03:10:27.963

3

Sounds like you want to capture "abnormal" key combos. And for that, I think you'll need to trap and record keyup and keydown.

You want something like this, but not necessarily this exactly ...

var keysdown = {};
var lastkey = 0;

element.onkeyup = function(evt) {
  var e = evt || window.event;
  keysdown[e.keyCode ? e.keyCode : e.charCode] = true;
}

element.onkeyup = function(evt) {
  var e = evt || window.event;
  var code = e.keyCode ? e.keyCode : e.charCode;
  keysdown[code] = false;
  switch (code) {
    // for cases wherein you need to detect keyA + keyB
    case 77:
      if (keysdown[79]) {
        // x
      } else {
        // m
      }
      break;
    // for cases wherein you need to detect sequence A, B
    case B:
       if (lastkey == A) {
         // do A,B
       } else {
         // do B
       }
       break;
  }
  lastkey = code;
}

edited May 09 '13 at 03:10

answered May 09 '13 at 02:54

svidgen

13,744
4
33
58

@kranzdot I'll throw a fiddle together ... gimme a minute. – svidgen May 09 '13 at 02:59
@kranzdot Quick question -- do you need to be able to detect sequences as well as combinations? Or, is my initial understanding correct, that 77 and 79 *together* produce 'x'? – svidgen May 09 '13 at 03:04
That would be super awesome. Yes, you are right. But, not when pressed at the same time, just if 79 is pressed after 77. – May 09 '13 at 03:05
don't worry to much about it – May 09 '13 at 03:17
Sorry, I was out for a while. The code does not work, at all. I clicked on all letters in the keyboad, but nothing is showing up – May 09 '13 at 12:18
@kranzdot You want the all original characters echoed to the textbox? ... just changed `return false;` to `return true;` in the `onkeyup` attribute. – svidgen May 09 '13 at 13:50

score 0 · Answer 2 · answered May 09 '13 at 02:41

0

have you tried this?:

if(text == 77 && text == 79){
    text 'x';
}

answered May 09 '13 at 02:41

I am not pressing two keys are the same time. Just one after the other. So, there is some timing involved – May 09 '13 at 03:00

score 0 · Answer 3 · edited Mar 31 '22 at 10:16

In this example there are combinations with 2 keys like ac and cd but you could have 3 or more combinations like agk

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Example</title>
    <style type="text/css">
        td {
            width: 20px;
            height: 20px;
            text-align: center;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
</head>

<body>

    <input type="text" />

    <script type="text/javascript">
        //IE 8 and below doesn't have addEventLisener but all other majon browser have it
        if (Element.prototype.addEventListener === undefined) {
            Element.prototype.addEventListener = function (eventName, callback) {
                var me = this;
                this.attachEvent("on" + eventName, function () {
                    callback.call(me, window.event);
                });
            }
        }
        var myApp = {
            multiChar: [
                [65, 67],//ac
                [67, 68] //cd
            ],
            prefChar: [0, 0], //Index of mutichar match
            replacers: ["مرحبا", "وداعا"], //replace multichar matches (ac with مرحبا) 
            checkCode: function (e) {
                var i = 0, inp;
                //IE probably doesn't have shiftkey or implements it differently
                if (e.shiftKey) {
                    //check stuff with shift
                    console.log("with shift", e.keyCode);
                    //If a match found then reset prefChar
                    prefChar = [0, 0];
                    return;
                }
                for (i = 0; i < myApp.multiChar.length; i++) {
                    if (e.keyCode !== myApp.multiChar[i][myApp.prefChar[i]]) {
                        myApp.prefChar[i] = (e.keyCode === myApp.multiChar[i][0]) ? 1 : 0
                        continue
                    }
                    myApp.prefChar[i]++;
                    if (myApp.prefChar[i] === myApp.multiChar[i].length) {
                        // found a multichar match
                        console.log(myApp.replacers[i]);
                        inp = document.body.getElementsByTagName("input")[0];
                        inp.value = inp.value.substr(
                            0, inp.value.length - myApp.multiChar[i].length) +
                            myApp.replacers[i];
                        myApp.prefChar[i] = 0;
                        return;
                    }
                }
            }
        }
        document.body.getElementsByTagName("input")[0]
            .addEventListener("keyup", myApp.checkCode);
    </script>


</body>

</html>

It doesn't replace anything at the moment just console.log a detection. Made a change to the code so for aaac the ac part will be detected as well. — HMR, May 09 '13 at 03:33
new answer replaces it. it might be easier to use regexp instead of this though — HMR, May 09 '13 at 03:43
Thank you so much, but the code seems very complex, can you direct me to a tutorial that helps me to record key presses? — , May 09 '13 at 12:20
It mostly relies on Arrays, multiChar contains an array of arrays so mutiChar[0] contains 2 values (the char codes for a and c or [65,67]. prefchar contains the indexes of the sub arrays in multiChar so if user typed a then prefChar is [1,0] bacause a matched keycode 65 in charCode[0][0] If I type c next it'll match charCode[0][1] (is 67). Work with multi dimentional arrays is a bit complicated and always hard to maintain or change later when you have to go back into the code and change it but it's a good fit for this particular problem. — HMR, May 09 '13 at 14:21
the following is a good reference to javascript: https://developer.mozilla.org/en/docs/JavaScript/Reference — HMR, May 09 '13 at 14:23
Hate to be picky but please consider making your answers shorter. The first 14 lines are totally useless. — Martin James, Aug 16 '18 at 00:14

Detecting key press sequence in JavaScript

3 Answers3