Javascript用字符串替换onKeyUp事件

Question

Im not very good at JavaScript and need a hand with what I think is an easy script. Basically I have an input box that when the user types in a key it will disappear and change to whatever string I have. I could only get the one letter to change, so that I have something to show what i mean. So whenever a user types a message it gets replaced with an "h", what I want though is to have "hello" typed out letter by letter and not just "h" all the time and not "hello" all at once.

Here is the code.

<form action=# name=f1 id=f1 onsubmit="return false">

<input type=text name=t1 id=t1 value="" size=25 style="width:300px;" 
    onkeypress="if(this.value.match(/\D/))"
    onkeyup   ="this.value=this.value.replace(/\D/g,'h')">

</form>

Answer 1

JUST EDITED AS IT IS GIVING JS ERROR HOPE YOU WONT MIND:Are you trying something like this:

 function replaceString(el){ var sampleText = "hello".split(""); var value = ""; console.log(el) el.value.split("").forEach(function(str, index){ value += sampleText[index%sampleText.length]; }); el.value = value; } 

 <form action=# name=f1 id=f1 onsubmit="return false"> <input type=text name=t1 id=t1 value="" size=25 style="width:300px;" onkeypress="if(this.value.match(/\\D/));" onkeyup ="replaceString(this);"/> </form> 

Answer 2

If you want to simulate typing text into the textbox then you will need to use a timeout. The following function should suffice:

function simulateTyping(str, el)
{
    (function typeWriter(len)
    {
      var rand = Math.floor(Math.random() * (100)) + 150;
      if (str.length <= len++)
      {
        el.value = str;
        return;
      }
      el.value = str.substring(0,len);
      if (el.value[el.value.length-1] != ' ')
        el.focus();
      setTimeout(
        function()
        {
          typeWriter(len);
        },
        rand);
    })(0);
}

You'll need to pass it two parameters : the string to type eg "hello" and the element into which to type the string. Here's a simple wrapper function:

function typeHello() {
  var el = document.getElementById('t1');
  var str = 'hello';
  simulateTyping(str, el);
}

When you call the typeHello function it will find the element with the "t1" id and type the "hello" text.