Use focus, keydown and keyup event. when users type a text field then we will look at which line is writing and how many letters are written. if line length and character length are over we will not be able to type in the text field.
#example.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Tutorial</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("
");
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("
"));
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="txtDes">Message:</label>
<textarea class="form-control" id="txtDes" name="txtDes"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>Output
