How can I detect when a line is automatically wrapped in a textarea?

Question

When typing text into a textarea and it becomes wider than the area, the text is wrapped onto the next line. Is there a way I can programmatically determine when this happens?

Answer 1

There's no actual event fired when the wrapping occurs, but you can hack a solution if you know the width of the textarea.

Listen for the change event on the text area and transfer the text into a div that wraps to it's content;

<div class="textwidth"></div>

With style:

.textwidth {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
}

Calculate the width of the div with the text content and compare that to the constant width of the textarea:

$('textarea').on('keyup', function() {
  var lastLine = $(this).val().split('/n').pop();
  var width = $('.textwidth').text(lastLine).width(); 
  if ( width >  $('textarea').width() ) {
    // fire wrap event
  }
});

Here's a bit of a shoddy fiddle that should give you some idea how to continue: http://jsfiddle.net/cXbAh/1/