Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatically sending keys to input field?

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?

like image 759
KaptajnKold Avatar asked Sep 24 '09 15:09

KaptajnKold


2 Answers

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>
like image 146
NickFitz Avatar answered Nov 19 '22 16:11

NickFitz


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

like image 28
Rik Heywood Avatar answered Nov 19 '22 15:11

Rik Heywood