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?
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...
This isn't quite what you asked for, but Control-H is the same as a backspace in most contexts.
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.
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>