Detect textarea natural line breaks

Question

I have a textarea element and on top of it, I also have a div block that superimposed exactly over the textarea (eg:-facebook comment box).Everything is going cool and fine not until this line-breaks comes into the scene. So I'm trying to detect every single line breaks( natural word-wrap) in the text area and insert a <br/> tags into the div block whenever it encounters.

Actually, looping over the characters in the textarea could have solve the issue but this would overkill the process particularly when the value of the textarea happens to be very long.

The "wrap-hard" attribute of the html5 is exactly what I need it but that requires one to submit the form.

Can someone suggest an ideal way to detect natural line breaks in the textarea? Many thanks!!!

What about [word-break](http://caniuse.com/#feat=word-break)? — Ricardo Souza, Jul 23 '12 at 15:36

Ricardo Souza · Accepted Answer · 2012-07-23T15:46:55.063

1

You can use word-break or white-space property in the div:

http://caniuse.com/#feat=word-break
http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-line

edited Jul 23 '12 at 15:46

answered Jul 23 '12 at 15:39

Ricardo Souza

16,030
6
37
69

I have tried both!! The drawbacks are - in the text area, a word wont simply break it off into a new line unless the length of the word exceeds the width of the text-area!! – spaceman12 Jul 23 '12 at 15:45
It happens even with pre-line or other values for `white-space`? – Ricardo Souza Jul 23 '12 at 15:47
Also, are you using `normalise.css`? – Ricardo Souza Jul 23 '12 at 15:49
Solved! the white space property is all that is required here :) – spaceman12 Jul 23 '12 at 19:56

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

Hopefuly these links will help you,

JavaScript: How to add line breaks to an HTML textarea?

http://www.sitepoint.com/forums/showthread.php?430599-lt-textarea-gt-new-line

just test for return character

edited May 23 '17 at 11:55

Community

1
1

answered Jul 23 '12 at 15:55

Lemex

3,772
14
53
87

Detect textarea natural line breaks

2 Answers2