textarea - 防止用户输入多于指定的行数

Question

我的文本区域是rows = "3"，需要防止用户输入超过 3 行。

此代码阻止输入到第四行，但无论如何设置了该行。

如果已经存在三行，如何按Enter 防止输入新行？

$('.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>

Answer 1

如果按下的键是Enter，并且当前行数达到最大值，则应阻止该事件：

$('.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>

请注意，这种技术仅适用于 键入 字符 - 通过粘贴、单击拖动等方式输入的字符仍可能包含不需要的 \ns，因此您可能会用换行符和 @ 分割987654326@ 改为修剪它们：

$('.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>