Simulate live typing

**riouxr** · November 25th, 2012, 08:31 AM

I need to simulate someone typing in fields on a fake webpage. You see this in movies all the time. Someone types whatever on the keyboard but the right text appears in a field. This avoids having to reshoot over and over in case the actor can't properly type or makes mistakes.

In my case I have a few fields on the webpage, like fist name, last name, email (simple fields) and a comment box (text field). This is actually for a movie. The actor is having a chat session. I saw examples where the text appears letter by letters automatically at a stable rhythm but that's not what I'm looking for. The text need to appear as the actor types on the keyboard, letter by letter. Any idea? Thanks.

**riouxr** · November 25th, 2012, 11:54 AM

Here's a solution if anyone needs the same thing. Enjoy!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="">
<head>
<title>Fake Input</title>
</head>

<body>

Hi my friends: <input type="text" fake-input="Hi my friends"/>
<br>
Another one!: <input type="text" fake-input="Another one!"/>
<br>
Normal : <input type="text" size="40">
<br>
Username : <input type="text" fake-input="PizzaGuy"/>
<br>
Password : <input type="password" fake-input="notseen"/>

<script type="text/javascript">

// Bound to a keydown event of a text input tag, replaces
// the keystroke with the next character in the 'fake-input' attribute
function fakein(evt)
{
console.log(evt)
evt = evt || window.event; // IE bug
var charcode = evt.keyCode || evt.which;
if (charcode < 48 || charcode > 90) {
return true;
}

targ = evt.target || evt.srcElement;
if (targ.nodeType == 3) targ = targ.parentNode; // safari bug

fake_input = targ.attributes['fake-input'].value;
current = targ.value;
console.log(fake_input)
console.log(current)
targ.value = fake_input.substr(0,current.length+1);

return false;
}

// Find all input tags with fake-input and bind the fakein function
inputs = document.getElementsByTagName('input');
for (var i=0;i < inputs.length; i++) {
myinput = inputs[i];
if (myinput.attributes['fake-input']) {
myinput.onkeydown = fakein
}
}
</script>

</body>
</html>

Threads:	525,381
Posts:	976,975
Members:	220,010

Developer Shed Network

ASP Free Login

Menu

Thread: Simulate live typing