I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.

Code:

<input id="profileurl" type="text">
<p class="url">/<span id="url-displayname">username</span></p>

JQuery:

var username;

$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);

See it in JS Fiddle: /

I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.

Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.

EDIT: You guys are fricken amazing. It looks like .val() is that magic method.

Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?

I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.

Code:

<input id="profileurl" type="text">
<p class="url">http://www.randomsite./<span id="url-displayname">username</span></p>

JQuery:

var username;

$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);

See it in JS Fiddle: http://jsfiddle/pQ3j9/

I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.

Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.

EDIT: You guys are fricken amazing. It looks like .val() is that magic method.

Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?

• javascript
• jquery
• html
• textinput

4 Answers 4

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
}).keypress(function(e) {
    return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

check out the modified jsfiddle:
http://jsfiddle/roberkules/pQ3j9/5/

Update: As @GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).

Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:

$('#profileurl').keyup(function(e) {
    $("#url-displayname").html($(this).val());
});

Updated jsFiddle: http://jsfiddle/pQ3j9/3/

For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :

$('#profileurl').keyup(function(key) {
    $("#url-displayname").text($(this).val());
});

Check it out at - http://jsfiddle/dhruvasagar/pQ3j9/6/

You can bind multiple events with bind

http://jsfiddle/dwick/DszV9/