Simulating live typing

riouxr · 11-25-2012, 02:21 PM

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.

sunfighter · 11-25-2012, 03:38 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="">
<head>
<title>New document</title>
<script type="text/javascript">
var i = 1;
function thingy()
{
	var string = "fake stuff";
	document.getElementById("stuff").value = string.substr(0,i);
	i++;

}
</script>
</head>
<body>
<input type="text" id="stuff" onkeyup="thingy();"/>
</body>
</html>

riouxr · 11-25-2012, 03:43 PM

Yep, that's pretty much it but we can see the letters changing to something else. Can we cheat this by making the first letter white and the replacement in black?

Thanks,

-R

riouxr · 11-25-2012, 05:52 PM

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>

sunfighter · 11-25-2012, 06:36 PM

Lets not even see where he's typing.

Code:

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

</head>
<body>
<input type="text" id="fakey">
<input type="text" style="border:1px solid red;position:absolute;left:-1000px;" id="stuff" onkeyup="thingy();">



<script type="text/javascript">
var i = 1;
document.getElementById('stuff').focus();
function thingy()
{
	var string = "fake stuff";
	document.getElementById("fakey").value = string.substr(0,i);
	i++;
}
</script>
</body>
</html>