CODEWITHSUNDEEP
javascriptjqueryhtmleventskeyboard
Martin AJ
Martin AJ

Reputation: 6697

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

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.

Upvotes: 0

Views: 1526

Answers (3)

Hiren Jungi
Hiren Jungi

Reputation: 854

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">

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

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

Upvotes: 1

Donii Hoho
Donii Hoho

Reputation: 381

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.

Upvotes: 1

Related Questions