15

I'm coding a web-portal for a set top box with a custom keyboard.

The keyboard has most of the standard character keys but no backspace!

Since there are some other free custom keys, I would like to map one of these to backspace when I'm in an input field or in a text area.

The question is: How do I programmatically send a backspace to the input field?

Or for that matter: How do I programmatically send any key (like an arrow key) to the input field?

0

4 Answers 4

7

Assuming the browser supports the W3C event model, you can create a KeyEvent and dispatch that using the dispatchEvent method of the input field. There's an example (using MouseEvent) over on mozilla.org. There are also some more links over where I last answered this question ;-)

UPDATE: the following code has been tested in Firefox 3.5, and successfully backspaces through the characters in the text field:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

window.onload = function() {
    var field = document.getElementById("foo");
    var button = document.getElementById("bar");
    button.addEventListener("click", function(event) {
        var keyEvent = document.createEvent("KeyboardEvent");
        keyEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
        field.dispatchEvent(keyEvent);
    }, false);
}

</script>

</head>
<body>
<div>
<input type="text" id="foo" value="abcdef">
<button id="bar" type="button">Fire key event</button>
</div>
</body>
</html>
3
  • Looks like WebKit doesn't support initKeyEvent - I'll see if I can find a workaround.
    – NickFitz
    Sep 25, 2009 at 9:48
  • 2
    This doesn't work in newer versions of Firefox (tested in Firefox 13.0), and neither in IE.
    – BornToCode
    Aug 3, 2013 at 21:58
  • initKeyEvent() is now deprecated, but it's possible to use KeyboardEvent constructor instead, something like event = new KeyboardEvent(typeArg, KeyboardEventInit);
    – G0BLiN
    Oct 16, 2019 at 8:50
4

If you are in a web browser, you can't fake real input events like keyboard and mouse events (for security reasons).

However, you will be able to detect the other custom keys being press, so you could respond to the onKeyDown event for the key you want to use and just update the input field when you detect it being pressed...

2
  • 1
    I was hoping it wouldn't come to that, but I guess it's the only solution if what you say is true. Sep 24, 2009 at 16:12
  • You certainly can create and dispatch events.
    – NickFitz
    Sep 24, 2009 at 16:24
-4

Use onkeypress and JavaScript. In the script you can check for the character entered that maps to the backspace and make it perform that operation on the text in the field.

-6

This isn't quite what you asked for, but Control-H is the same as a backspace in most contexts.

2
  • What do you mean by "but Control-H", send CTRL+H?
    – m3nda
    Feb 13, 2015 at 5:39
  • 5
    In any browser that I've ever used, CTRL+H brings up history.
    – PrinceTyke
    Aug 6, 2015 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.