CODEWITHSUNDEEP
javascriptdomdom-events
user1236473
user1236473

Reputation:

Detecting key press sequence in JavaScript

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.

  1. when you press m then quickly, o it should generate x;
  2. 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.

Upvotes: 3

Views: 6813

Answers (3)

HMR
HMR

Reputation: 39320

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>

Upvotes: 0

svidgen
svidgen

Reputation: 14302

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;
}

Upvotes: 3

user2116306
user2116306

Reputation:

have you tried this?:

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

Upvotes: 0

Related Questions