How can I press one of keyboard's button by jQuery?

Question

Here is my code:

$("input").on({
    keydown: function(ev) {
        if (ev.which === 27){   // esc button
           backspace_emolator();
        } else if (ev.which === 8){   // backspace button
           console.log('backspace button pressed');
        }
    }
});

function backspace_emolator(){
   // remove one character exactly how backspace button does
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" class="myinput">

All I'm trying to do is making esc button exactly the same as backspace button. So I want to remove one character of .myinput's value when <kbd>esc</kbd> is pressed.

How can I do that?

Note: I don't want to just remove one character of .myinput's value. I want to press backspace button. So backspace button pressed should be shown in the console when I press esc button.

Possible duplicate of [Is it possible to simulate key press events programatically?](http://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programatically) — Ben Fortune, Jan 20 '17 at 11:05

Donii Hoho · Accepted Answer · 2017-01-20T12:24:15.750

1

This is what I would do. I do not argue that this is the best solution, instead it is a working one.

$("input").on({
    keydown: function(ev) {
        if (ev.which === 27){   // esc button
          backspace_emolator(this);
        } else if (ev.which === 8){   // backspace button
          console.log('backspace button pressed');
        }
    }
});

function backspace_emolator(el){
   // remove one character exactly how backspace button does
   var val = el.value
   el.value = val.substring(0, val.length - 1);
   // trigger event
   var e = jQuery.Event("keydown");
   e.which = 8; // # Backspace keyCode
   $(el).trigger(e);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" class="myinput">

Edited: I have modified my code in respect to your edit. The reason @Alexandru-Ionut Mihai suggestion does not work for you is because you are only listening for keydown and in his example he is triggering keypress.

edited Jan 20 '17 at 12:24

answered Jan 20 '17 at 10:42

Donii Hoho

371
1
6

That is correct kinda .. upvote, but I've edited my question, please take a look at it. – Martin AJ Jan 20 '17 at 10:44
I have edited my answer and tested it, Both esc and backspace now trigger the console.log and both are clearing one character. – Donii Hoho Jan 20 '17 at 12:25
Your fiddle works exactly as expected, but I don't know why it doesn't work on my real codes `:-(` – Martin AJ Jan 20 '17 at 12:28
1

From your screenshot it seems to me that it has nothing to do with the trigger and everything to do with the arguments you are passing to the regexp replace function. Have a console.log output just before the argument is passed to regexp replace, my wild guess is that it is too big. Here are some registered cases: [link](http://stackoverflow.com/questions/22123769/rangeerror-maximum-call-stack-size-exceeded-why) – Donii Hoho Jan 20 '17 at 12:43

Mihai Alexandru-Ionut · Answer 2 · 2017-01-21T21:05:32.063

1

Here is solution:

You have to trigger an event for your input.

$("input").on({
    keydown: function(ev) {
        if (ev.which === 27){   // esc button
          backspace_emolator();
        }
    }
});

function backspace_emolator(){
  var e = jQuery.Event("keydown", { keyCode: 8 }); // you can specify your desired key code 
  $('input').trigger(e);
}

edited Jan 21 '17 at 21:05

answered Jan 20 '17 at 10:43

Mihai Alexandru-Ionut

47,092
13
101
128

This is correct kinda *(based on my last version of question)*. upvote. But I've edited my question, please take a look at it – Martin AJ Jan 20 '17 at 10:50
@MartinAJ, please take a look now. – Mihai Alexandru-Ionut Jan 20 '17 at 11:13
Nothing happens, do yo know why? – Martin AJ Jan 20 '17 at 12:03

score 1 · Answer 3 · edited Mar 18 '17 at 23:44

1

Use this code it works as you want it to be.

$("input").on({
    keydown: function(ev) {
        if (ev.which === 27){   // esc button
           backspace_emolator(ev);
        }
        if (ev.which === 8){   // backspace button
           console.log('backspace button pressed');
        }
    }
});

function backspace_emolator(ev){
   // remove one character exactly how backspace button does
        var inputString = $('#inputID').val();
        var shortenedString = inputString.substr(0,(inputString.length -1));
    $('#inputID').val(shortenedString);
        console.log("Backspace button Pressed"+" "+inputString);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputID" type="text" name="fname" class="myinput">

edited Mar 18 '17 at 23:44

halfer

19,824
17
99
186

answered Jan 20 '17 at 10:54

Hiren Jungi

854
8
20

You know, `backspace button pressed` should be printed, when you press `ESC` button! Not `ESC Pressed `. – Martin AJ Jan 20 '17 at 10:55
It's simple i will change it. – Hiren Jungi Jan 20 '17 at 10:56
you can check the output now. – Hiren Jungi Jan 20 '17 at 10:58
`:-)` ..! buddy, thank you for your attempt, but I really can change the message o by myself :-) I meant `if (ev.which === 8){` should be true when you press `ESC`. upvote anyway – Martin AJ Jan 20 '17 at 10:58
Thank you and sorry for misunderstanding. :) – Hiren Jungi Jan 20 '17 at 10:59

How can I press one of keyboard's button by jQuery?

3 Answers3