Menu
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?
759
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>
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...
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
