How to Limit the Number of Characters per line in textarea

April 3, 2020 XpertPhp Comments 0 Comment

In this tutorial, we are going to you how to write limit the number of characters per line in the Textarea field.
When you create a fillable pdf file and you need to display terms and conditions or whatever comment in within the space allocated in the PDF. At that time we should have limited both the number of lines and the number of characters in each line. lets for that you can see below code.

Here in this above code, we have used focus, keydown and keyup event. when the users are typing into the text field that time we will check the which line into write and how many characters write. if line length and character lengths are over then we can not type in the text field.

<!DOCTYPE html>
<html lang="en">
	<head>
	<title>How to Limit the Number of Characters per line in textarea</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script>
	$(function() {
		var maxLength = 30;
		var mawRow = 4;
		$('#txtDes').on('input focus keydown keyup', function() {
		var text = $(this).val();
		var lines = text.split("\n");

		for (var i = 0; i < lines.length; i++) {
			if (lines[i].length > maxLength) {
				lines[i] = lines[i].substring(0, maxLength);
			} 
		}
		while (lines.length > mawRow){ 
			lines.pop();
		}
		$(this).val(lines.join("\n"));
		});
	});
	</script>
	</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-lg-12">
			<div class="form-group">
				<label for="txtDes">Description:</label>
				<textarea class="form-control" id="txtDes" name="txtDes"></textarea>
			</div>
		</div>
	</div>
</div> 
</body>
</html>

<!DOCTYPE html>

<head>

<title>How to Limit the Number of Characters per line in textarea</title>

$(function() {

var maxLength = 30;

var mawRow = 4;

$('#txtDes').on('input focus keydown keyup', function() {

var text = $(this).val();

var lines = text.split("\n");

for (var i = 0; i < lines.length; i++) {

if (lines[i].length > maxLength) {

lines[i] = lines[i].substring(0, maxLength);

}

while (lines.length > mawRow){

lines.pop();

}

$(this).val(lines.join("\n"));

});

</script>

</head>

<body>

<label for="txtDes">Description:</label>

</div>

</body>

</html>

Please follow and like us: