CODEWITHSUNDEEP
jqueryhtmlinput
Alin
Alin

Reputation: 1228

Show text letter by letter inside input

I am trying to show a message inside an input tag letter by letter, like actually being written and targeting the value will only show each letter at a time, not one after another: jsFiddle

HTML

<input class="mailchimp" type="text" spellcheck="false" />

Jquery

var fillInput = function (target, message, index, interval) {    
  if (index < message.length) { 
    $(target).val(message[index++]); 
    setTimeout(function () { fillInput(target, message, index, interval); }, interval); 
  } 
}

$(function () { 

  fillInput(".mailchimp", "Subscribe", 0, 100); 

});

If you change the $(target).val(message[index++]); into $(target).append(message[index++]); and create a div with the class mailchimp it will show each letter one after another.

How can I go about this? Thanks.

Upvotes: 2

Views: 447

Answers (1)

LTasty
LTasty

Reputation: 2008

You need append char with value of input
JS

var fillInput = function (target, message, index, interval) {    
  if (index < message.length) { 
    $(target).val($(target).val()+message[index++]); 
    setTimeout(function () { fillInput(target, message, index, interval); }, interval); 
  } 
}

$(function () { 

  fillInput(".mailchimp", "Subscribe", 0, 100); 

});

http://jsfiddle.net/u28ajyfz/

Upvotes: 1

Related Questions