Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simulating live typing

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •