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 />) wit开发者_开发问答h 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.

---

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.
    }
});

---

Line 1 (notice the argument):

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

Line 5:

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

---

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});
    }
});

---

Change the event to keyup instead of keypress.

---

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

---

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()
    }
})

---

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.

---

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

---

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