Replace input in real time with jQuery

Question

I have a problem with this script, I want to replace anything entered in the input field with a specific letter in real time, with Hello World in the field.

 <input id="inputID" type="text" value="" maxlength="11"/>
 $('#inputID').keyup(function(e){
  var cv=["h","e","l","l","o"," ","w","o","r","l","d",""];

  var i=$('#inputID').val();

  for (j=0;j<11;j++){

    this.value = this.value.replace(i[j],cv[j]);

}

});

This script works well when I write slowly but not when I write quickly. thanks for your help

So every keypress you replace the letter 11 times?

tymeJV
– tymeJV

2013-05-20 00:53:17 +00:00
Commented May 20, 2013 at 0:53 — tymeJV
– tymeJV, Commented May 20, 2013 at 0:53

xdazz · Accepted Answer · 2013-05-20 00:57:04Z

3

Try this way:

$('#inputID').keyup(function(e){
     var cv = 'hello world';
     this.value = cv.substr(0, this.value.length);
});

See the working demo.

answered May 20, 2013 at 0:57

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

1 Comment

Benjamin Gruenbaum Over a year ago

Correct and compact. Only thing I'd change is substr to substring, but that's really minor.

Benjamin Gruenbaum · Accepted Answer · 2013-05-20 01:00:18Z

1

xdazz's solution is correct (he beat me to it)

I figured there might be benefit in showing a solution that does not rely on jQuery at all, so users who don't want to rely on it can benefit too.

 document.getElementById('inputID').onkeyup = function () {
     var cv = "hello world"; // Your 'correct value' 
     //Set the value to a substring of cv at the current length
     this.value = cv.substring(0, this.value.length); 
 };

http://jsfiddle.net/9yfCe/

answered May 20, 2013 at 1:00

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Comments

Cᴏʀʏ · Accepted Answer · 2013-05-20 01:14:07Z

0

This is about as fast as I could get it with maintaining the event on keyup:

var hw = "hello world";
$('#inputID').keyup(function(e){
    this.value = hw.substring(0, this.value.length);
});

Demo

Edit: I'm fairly amazed that three people came up with nearly the exact same solution. Really cool.

Edit 2: I tweaked it a bit to make it replace the character initially typed with a space to help lessen the effect of the letters being replaced.

var hw = "hello world";
$('#inputID').keydown(function (e) {
    if (e.which !== 8) { // allow backspace
        e.preventDefault();
        this.value += ' ';
    }
}).keyup(function () {
    this.value = hw.substring(0, this.value.length);
});

Second demo

edited May 20, 2013 at 1:14

answered May 20, 2013 at 1:01

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Collectives™ on Stack Overflow

Replace input in real time with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related