Applying indent to each first line of paragraph of text area

Question

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

Answer 1

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).