Getting mulitple lines data from html textarea using javascript

Question

Hi,
I am facing trouble while getting data from an html textarea.The textarea is defined as follows:

<textarea id="ta" cols=30 rows=15> 
</textarea>

Here,the textarea is restricted to 30 chars.So,if the no of characters per line exceeds 30 chars,the cursor will move to next line.It works well.But the problem,when I am trying to get that value using javascript ,the entire textarea content is shown as single line(continuous string) though it has mulitple.
Here is my fiddle

It shows mulitple lines,if line is separated by ENTER key.

That's because it is one continuous string. You are not adding line breaks, you are just causing wrapping within the text box. The value contained by this textbox will still be a continuous string, so you will need to provide your own line breaking if that is what is required. — CodePB
– CodePB, Commented Nov 14, 2012 at 9:04
does not happen for me ... here is a screenshot: imgur.com/ZdTvN — jsshah
– jsshah, Commented Nov 14, 2012 at 9:05
It is one line, it's just wrapped in the textarea because it is not wide enough. I guess you can always split the string every 30 characters (and some log to avoid splitting words) if you really want that. — Felix Kling
– Felix Kling, Commented Nov 14, 2012 at 9:05

Christian Lundahl · Accepted Answer · 2012-11-14 09:15:58Z

2

If you press ENTER when inputing to a <textarea> this will insert a line break. A line break in JavaScript is \n. You shouldn't need to do anything with this, JavaScript should always treat it as a line break. Just like for jsshah, the code you pasted works fine for me too.

answered Nov 14, 2012 at 9:15

Christian Lundahl

2,0704 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rama Rao M Over a year ago

Yeah..I know that part.But What about if it wraps to next line? Does't it consider them as multiple lines?

Christian Lundahl Over a year ago

No. Wrapping is not a line break. Like I said, a line break is defined as \n and wrapping is... well... wrapping and nothing else.

Urg Mu · Accepted Answer · 2012-11-14 09:27:35Z

1

Press "enter key" it will be included in the alert.

Even if with "new lines" still the value is a single string. example: "Stack Overflow" without pressing enter.

"Stack[ENTER KEY]Overflow" pressing enter... still results a string "Stack\nOverflow"

var x = "Stack\nOverflow";
alert(x);

Element attribute COLS -> column, while ROWS -> rows, much like width and height, but not really.

<textarea id="ta" cols=30 rows=15></textarea>

edited Nov 14, 2012 at 9:27

answered Nov 14, 2012 at 9:19

Urg Mu

466 bronze badges

Comments

Jukka K. Korpela · Accepted Answer · 2012-11-14 09:33:46Z

By default, browsers automatically line-wrap the text if needed, but such wrapping is just visual, or “soft”. It does not affect the data sent to a server (when the form is submitted) or the internal representation.

If you use the wrap=hard attribute in textarea, then automatic wrapping becomes “hard” in the sense of adding line breaks to the submitted data. But on the browsers I tested, the line breaks do not appear in the internal representation that you can access in JavaScript. (Presumably, the browser re-wraps the text upon submission.)

So if you really need to get the text wrapped, as accessed in JavaScript, you need to do it yourself. On the other hand, as the automatic wrapping is not actual user input, there’s seldom reason to treat it as if it were.

Collectives™ on Stack Overflow

Getting mulitple lines data from html textarea using javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related