How to go to the next line by pressing the space at the end of the current line in textarea

Question

My text area is set up with these two matching style attributes:

white-space: pre-wrap; word-wrap: break-word; 

The functionality that I am trying to achieve is that when the user presses the space bar enough time to reach the right edge of the text field, I want the cursor to move to the next line.

Answer 1

I did a “hack with JS” ... it's pretty simple:

 var keypress = function(event){ var textarea = event.target; var content = textarea.value; var cols = textarea.cols + 1; if(content.length % cols === textarea.cols){ textarea.value += '\n'; } }, textareas = document.getElementsByTagName('textarea'); for(var t = 0; t < textareas.length; t += 1){ var textarea = textareas[t]; textarea.addEventListener('keyup', keypress); textarea.addEventListener('keydown', keypress); } 

 textarea { white-space: pre-wrap; word-wrap: break-word; } 

 <textarea cols="20" rows="10"></textarea>