javascript - Applying indent to each first line of paragraph of text area - Stack Overflow

admin管理员组

文章数量:1429458

I want to apply indention to each paragraph of text area as user types in. I used following code:

<textarea rows="1" style="height:1em; text-indent:-50px; padding-left:50px;" cols="25" html="true" id="text" >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</textarea>

However it applies to only first line of the textarea and not to every first line of new paragraph. Can we achieve this by css? or any javascript code?

Thanks in advance

I want to apply indention to each paragraph of text area as user types in. I used following code:

<textarea rows="1" style="height:1em; text-indent:-50px; padding-left:50px;" cols="25" html="true" id="text" >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</textarea>

However it applies to only first line of the textarea and not to every first line of new paragraph. Can we achieve this by css? or any javascript code?

Thanks in advance

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Nov 7, 2013 at 7:33 user2173567user2173567 5111 silver badge22 bronze badges 5

• which browser you testing – Sridhar R Commented Nov 7, 2013 at 7:36
• 1 check this fiddle jsfiddle/TBB4N/9 it applies intent to all 1st lines – Sridhar R Commented Nov 7, 2013 at 7:38
• @SridharR your demo indents ALL lines... – omma2289 Commented Nov 7, 2013 at 7:40
• yes what your need bro – Sridhar R Commented Nov 7, 2013 at 7:40
• Sridhar, the first line of each paragraph i.e. when user preses enter key, it should start from -50px. – user2173567 Commented Nov 7, 2013 at 7:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

If you replace the style attribute by style="text-indent: 50px", then the paragraphs will have a first-line indent of 50px.

It’s just so that there is only one paragraph in the textarea. The data there is processed as plain text, and there is no way to indicate a paragraph break. Leaving an empty line means just an empty line within a block of text treated as one paragraph.

If you want an input area with paragraph breaks, you need to use a normal element like div with the contenteditable attribute (possible, but requires a different approach, e.g. if you want data to be sent to a server, you need to copy it into a hidden field).

本文标签： javascriptApplying indent to each first line of paragraph of text areaStack Overflow