textarea - prevent user to type more lines than specified

Question

My textarea is rows = "3" and need to prevent user to type more than 3 lines.

This code prevents to type into fourth line but the line is set anyway.

How to prevent entering new line by pressing Enter if three lines are already there?

$('.tx').on('keypress', function () {
   let max = parseInt($(this).attr('rows'));
   let a = $(this).val();
   let x = a.split("\n").length - 1;
   if(x == max){return false;}
});

.tx{
display:block;
width:100%;
background:gold;
line-height:1.3em;
text-transform:uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='tx' rows = "3"></textarea>

Possible duplicate of [Limiting number of lines in textarea](https://stackoverflow.com/questions/556767/limiting-number-of-lines-in-textarea) — Jeto, Feb 15 '19 at 09:06
@Jeto pls compare answers on your link with the `Certain Performance's`solution? If a question is already in history of this site - doesn't mean that it contains the best answers and valid forever — qadenza, Feb 15 '19 at 09:11
The selected answer handles copy & pastes, also question has a variety of answers (both with and without jQuery) and is protected so it's supposed to still be valid. It might be using older Javascript syntax (since answers are a bit dated) is the only thing. — Jeto, Feb 15 '19 at 09:13
it's not `a bit dated` - it's `10 years dated`. You admins should stop with that bad practice. — qadenza, Feb 15 '19 at 09:16
I'm not an admin, it's just a vote. Question will only be closed if enough people agree (and look at this question to begin with). Just use @CertainPerformance's (great) answer if you will. — Jeto, Feb 15 '19 at 09:18

CertainPerformance · Accepted Answer · 2019-02-15T09:08:32.697

You should prevent the event if the key pressed is Enter and if the current number of rows is at the maximum:

$('.tx').on('keypress', function(e) {
  const maxRows = Number($(this).attr('rows'));
  const currRows = $(this).val().split("\n").length;
  if (maxRows === currRows && e.key === 'Enter') {
    e.preventDefault();
  }
});

.tx {
  display: block;
  width: 100%;
  background: gold;
  line-height: 1.3em;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='tx' rows="3"></textarea>

Note that this sort of technique will only work for typed characters - characters inputted via paste, click-drag, etc may still include undesired \ns, so you might split by newlines and slice to trim them off instead:

$('.tx').on('keypress paste', function(e) {
  setTimeout(() => tryReplace(e.target));
});

function tryReplace(textarea) {
  const maxRows = textarea.rows;
  textarea.value = textarea.value
    .split('\n')
    .slice(0, 3)
    .join('\n');
}

.tx {
  display: block;
  width: 100%;
  background: gold;
  line-height: 1.3em;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='tx' rows="3"></textarea>

Just a note that this doesn't prevent copy & pastes (but question didn't mention this so it might not be needed). — Jeto, Feb 15 '19 at 09:04
`let max = parseInt($(this).attr('rows'));` vs `const maxRows = Number($(this).attr('rows'));` - is there any special reason? — qadenza, Feb 15 '19 at 09:05
Also note that this technique does not work if user just types input without pressing the enter key. In this case we can input n number of lines. Not sure if this criteria need to be satisfied as the question mentions "Restrict to 3 Rows". — Santhosh mp, Feb 15 '19 at 09:17
@Santhoshmp, I see, you're right, maybe css `white-space:nowrap` helps — qadenza, Feb 15 '19 at 09:19

textarea - prevent user to type more lines than specified

1 Answers1