CODEWITHSUNDEEP
jqueryhtmlkeypress
jake
jake

Reputation: 1939

Using jQuery to replace textbox with <textarea> after certain character length

I'm using the simple code below to replace a textbox (<input type=text />) with a <textarea> element after the user types in a certain number of characters. In the example below, this takes place after the 10th character. The code works, except that the contents of the <textarea> omits the 10th character that the user typed. For example, if you type "testing 1234" in the textbox, the textarea will omit the "4". Any ideas? Thanks. --Jake

    $('.info').keypress(function() {
    var count = $(this).val().length;
    if (count > 10)
    {
        var contents = $(this).val();
        $(this).after('<textarea></textarea>').next().val(contents).end().remove()
    }
})

UPDATE: I tried the suggestion many of you shared: using the keyup event. It works, but only if you type slowly. If you're a fast typer, like I suspect most people here would be, the 10th character is still omitted when using the keyup event.

Upvotes: 6

Views: 2862

Answers (9)

Andy E
Andy E

Reputation: 344695

Neil's answer is probably the best approach. However, if you want to go ahead replacing the input with a textarea, you can use jQuery's replaceWith() (suggested in patrick_dw's now deleted answer), but you should avoid using events like keyup.

The HTML5 oninput event was designed to handle all sorts of text input, like pasting, dragging and dropping, spell checker corrections, etc. 

$('.info').on('input', function() {
    var count = $(this).val().length;
    if (count > 10) {
        $(this).replaceWith('<textarea>', {value: this.value});
    }
});

Upvotes: 2

Neil
Neil

Reputation: 5780

Perhaps you should use textarea from the start, augmenting "rows" attribute only. I'd be willing to bet you'd maintain all your characters after the change and it would behave exactly like a textbox with rows="1".

$('.info').keypress(function() {
    var count = this.value.length;
    if (this.rows == 1 && count > 10)
    {
        this.rows = 4;  // Or whatever you'd prefer.
    }
});

Upvotes: 15

dan_waterworth
dan_waterworth

Reputation: 6471

When the event is handled by your function the character has not been entered into the box. Look at the event object passed to the javascript function and append the character that triggered it.

Upvotes: 1

icyrock.com
icyrock.com

Reputation: 28618

Try using keyup instead of keypress. But I think what Neil suggested is a better approach.

Upvotes: 0

pestaa
pestaa

Reputation: 4749

Line 1 (notice the argument):

$('.info').keypress(function(e) {

Line 5:

    var contents = $(this).val() + String.fromCharCode(e.keyCode);

Upvotes: 2

Scott
Scott

Reputation: 3977

Instead of using Keypress use keyup. that way it allows change for the typed data to be inserted before the change happens to a text area. this should stop the last char from being dropped

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86892

Try using the keyup event

$('.info').keyup(function() {
    var count = $(this).val().length;
    if (count > 10)
    {
        var contents = $(this).val();
        $(this).after('<textarea></textarea>').next().val(contents).end().remove()
    }
})

Upvotes: 1

Nathan
Nathan

Reputation: 11159

What about using keyup instead of keypress? That triggers the action after the key is released (and the character has been typed).

Upvotes: 1

Stephen
Stephen

Reputation: 18964

Change the event to keyup instead of keypress.

Upvotes: 1

Related Questions