Warning: session_start(): open(/tmp/sess_b0c5cbeb82b35d7588c3ead60b754333, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to Add Line Breaks to Textarea using Javascript - LearnShareIT

How to Add Line Breaks to Textarea using Javascript

add line breaks to Textarea

As you may know, an HTML Textarea element is a multi-line text input control. Though in some cases, it is necessary to write in text dynamically using Javascript, though you might not know how to add line breaks to Textarea with this way. Learn how to using the examples and explanations below.

Adding Line Breaks to Textarea using Javascript

Adding "\r\n" to the value attribute of the Textarea element

You can add "\r\n" to the value Textarea attribute.

Though keep in mind that it is better to use both "\r" (Carriage Return, moves the cursor to the beginning of the line) and "\n" (Line feed, moves to a new line). Additionally, you cannot simply use <br> since a Textarea’s value attribute is text and not HTML.

You can add to the value attribute by using either the document.getElementById("id").value or $("#id").val() using JS and JQuery respectively.

Here’s an example, both in JS and JQuery:

HTML:

<body>
	<textarea id="textareaId">learnshareit.com</texarea>
	<button id="btn" onclick="addBreak()">Break</button>
</body>

JS:

function addBreak() {
	document.getElementById("textareaId").value += "\r\n";
}

JQuery:

$(document).ready(function() {
	$("#btn").click(function() {
		$("#textareaId").val(function(i,v) {
			return v + "\r\n";
    });
  });
});

Adding Template literals (`) to the value attribute of the Textarea element

The Template literal allows for multi-lining and string-interpolation, only the former is really needed in this situation.

Since a Template literal allows for multi-lining, you can simply use an empty space Template literal string to be used as a line break. However, using it like can result in “ugly” looking code, hence it isn’t suggested.

Here’s the same example but with this solution:

HTML:

<body>
	<textarea id="textareaId">learnshareit.com</texarea>
	<button id="btn">Break</button>
</body>

JS:

function addBreak() {
	document.getElementById("textareaId").value += `
`;
}

JQuery:

$(document).ready(function() {
	$("#btn").click(function() {
		$("#textareaId").val(function(i,v) {
			return v + `
`;
    });
  });
});

Note that it is necessary to have the ending ` not have any space behind it.

Summary

The easiest way to add line breaks to a Textarea element is to add "\r\n" to the element’s value attribute. While using an empty Template literal is an option, we heavily discourage using it. However, Template literals can still be useful in other contexts.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *