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?
See Question&Answers more detail:os
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>
