Javascript Replace onKeyUp event with a string

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>

you want the first letter should change for example xylo means hylo you want to change or only one letter should come can you please little clear — Mr.M
– Mr.M, Commented Dec 11, 2015 at 10:14
PLZ explain it what you want in better way the things you have written is quite messed up not getting it properly — Tanmay
– Tanmay, Commented Dec 11, 2015 at 10:15

Tanmay · Accepted Answer · 2015-12-11 10:51:03Z

2

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>

edited Dec 11, 2015 at 10:51

Tanmay

5908 silver badges20 bronze badges

answered Dec 11, 2015 at 10:22

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeffery Penner Over a year ago

Awesome. Thanks so much. This is exactly what im looking for.

Dan Nagle · Accepted Answer · 2015-12-11 10:47:13Z

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 e.g. "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.

Collectives™ on Stack Overflow

Javascript Replace onKeyUp event with a string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related