How to Add Line Breaks in the Placeholder of a Textarea Input

What happend

Lately, I’ve been exploring Chart JS and thought about creating a feature for some experimentation.

However, I encountered an issue with line breaks in the placeholder text.

Why doesn’t the ‘\n’ newline character work for formatting the placeholder?

After all, it’s a widely used technique in the programming community, right?

⬇You can try it here

See the Pen textarea_placeholder_test by story zyra (@story-zyra) on CodePen.

(Chinese translation : I want to change line! Change line change line)

After a bit of searching, I finally found the solution!

They are “
” and “
”

They are respectively the ASCII codes for:

LF: Line Feed, representing a line break = \n, with an ASCII code of 10.

CR: Carriage Return, similar to the effect of pressing Enter = \r, with an ASCII code of 13.

Therefore, the original \r\n can be replaced using these codes.

And let’s see how it works

See the Pen textarea_placeholder_asciicode by story zyra (@story-zyra) on CodePen.

Conclusion

Indeed, ASCII codes are truly fascinating. I should make some time to dust off my old university textbooks…

By the way, I hope that the charting feature I’ve been working on recently can be launched online for everyone to try out someday.

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes