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>

请注意，这种技术仅适用于键入的字符-通过粘贴，单击拖动等输入的字符可能仍包含不需要的\n，因此您可能会用换行符分隔和slice修剪掉它们：

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

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

1 个答案: