javascript - Grab text input as the user types - Stack Overflow

admin管理员组

文章数量:1317915

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

Share Improve this question Follow edited Jun 16, 2011 at 1:51 Zaqx asked Jun 16, 2011 at 1:29 ZaqxZaqx 1,44288 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

$('#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/

本文标签： javascriptGrab text input as the user typesStack Overflow