Append text onto html text input while typing

Question

I would like to use jquery to append text onto what the user has typed in a text box, while the user is typing.

Say I wanted to append " is a hat" to the end of what the user typed.

Lets say the user starts typing "My Friend" into the field.

As they type the box will read:

M -> M is a hat
y -> My is a hat
  -> My  is a hat
F -> My F is a hat
r -> My Fr is a hat
...

I started writing a function for the keypress event, but then I realized that I would end up with something like

M -> M is a hat
y -> M is a haty is a hat
...

So what I want to know is how I should

Replace the old suffix
Place the cursor back to where the user was typing
Make sure they only are able to type before the suffix, so they they can't edit the suffix

tymeJV · Accepted Answer · 2013-06-24 23:53:08Z

3

You can append to a span like so:

var phrase = " is a hat";
$("#idOfInput").keydown(function() {
    $("#idOfSpan").html(this.value + phrase);
});

answered Jun 24, 2013 at 23:53

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Sushanth -- · Accepted Answer · 2013-06-24 23:56:48Z

3

You can try this

JS

$("input").keyup(function() {
    $(".dynamic").html(this.value);
});

HTML

<input type="text" />
<div>
    <span class="dynamic"></span>
    <span class="static"> is a hat </span>
</div>

Check Fiddle

You will basically targeting the span that holds the dynamic text and render the html based on the keyup event.

answered Jun 24, 2013 at 23:56

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Adam Schiavone Over a year ago

I took tyme's just because of the difference of how he did it, but +1 for the fiddle.

user2496033 · Accepted Answer · 2013-06-25 07:07:41Z

0

this following example work perfectly .  
 **html**

    <input type="text" id="text"/>
    <p><span id="app"></span>
    <span>this is a hat</span>
    <p>

    **script**
    ----------
    $("#text").keyup(function(){
        $("#app").text($("input").val());
    });

answered Jun 25, 2013 at 7:07

user2496033

Collectives™ on Stack Overflow

Append text onto html text input while typing

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related