Using jQuery to replace the <textarea> text field after a specific character length

Question

I use the simple code below to replace the text field ( <input type=text /> ) with the <textarea> element after the user enters a certain number of characters. In the example below, this happens after the 10th character. The code works, except that the content <textarea> skips the 10th character entered by the user. For example, if you type “test 1234” in a text box, the text box will omit “4”. Any ideas? Thank you --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 to suggest many of you: using the keyup event. It works, but only if you type slowly. If you are a fast typer, as I suspect most people will be here, the 10th character is still omitted when using the keyup event.

Answer 1

Perhaps you should use textarea from the very beginning, adding only the "rows" attribute. I would bet that you would save all your characters after the change, and it would behave exactly like a text box with lines = "1".

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

Answer 2

Line 1 (note the argument):

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

Line 5:

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

Answer 3

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

I recently wrote a plug-in that will handle text input much better than keypress , keyup and keydown . The HTML5 oninput designed to handle all kinds of text input, such as insert, drag and drop, spelling correction, etc. My plugin makes this event a cross browser.

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

There's also a blog post outlining the reasons why you shouldn't use key events to detect input.

Answer 4

Change the event to keyup instead of keypress .

Answer 5

How about using keyup instead of keypress ? This triggers the action after the key is released (and the character was entered).

Answer 6

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

Answer 7

When an event is processed by your function, a character has not been entered in the field. Look at the event object passed to the javascript function and add the character that called it.

Answer 8

Instead of using Keypress, use keyup. thus, it allows you to change the entered data before the change occurs in the text area. this should stop char removal

Answer 9

Try using keyup instead of pressing a key. But I think the best approach Neal has proposed.