Question

我想有一个textarea，用户可以输入最多255位数字和5行文字。然后当他们点击“发布”按钮时，文本将被发送到另一个php文件。文本被发送到第二个php文件，255个数字的限制工作（maxlength =“255”），但我无法获得行的限制。我用Google搜索，搜索论坛并尝试了多项内容，但没有任何效果。这是我尝试过的事情之一。

<script>
$(document).ready(function () {
$('textarea[name=message]').on('keypress', function (event) {
var textarea = $(this),
    numberOfLines = (textarea.val().match(/\n/g) || []).length + 1,
    maxRows = 5;

if (event.which === 13 && numberOfLines === maxRows ) {
  return false;
}
});
});
</script>
<textarea name="message" placeholder="What's on your mind?" maxlength="255" data-limit-rows=true></textarea>

<input type="submit" value="Post">
</form>

由于

Answer 1

容器中的文本行数通常取决于该容器的尺寸。因此，您首先需要有关textarea内部文本的一些信息。

我们可以假设一个字符是textarea中一行的高度。这当然也取决于textarea中字符的font-size和font-family。一旦我们得到这些尺寸，我们就可以检查在textarea中输入了多少行。不幸的是，为了检查这些数字，我们需要使用与textarea相同宽度的div来复制其中的一部分。

＆＃13;

var textarea = document.getElementById('userinput');
var button = document.getElementById('checklines');

button.onclick = function(){
  var temp = document.createElement('div');
  temp.style.width = textarea.clientWidth + 'px';
  var style = window.getComputedStyle(textarea)
  temp.style.fontFamily = style.getPropertyValue("font-family");
  temp.style.fontSize = style.getPropertyValue("font-size");
  temp.textContent = 'X';
  document.body.appendChild(temp);
  var unit = temp.clientHeight; // height of one line
  temp.textContent = textarea.value;
  var lines = temp.clientHeight / unit;
  console.log(lines);
  temp.outerHTML = '';
}

＆＃13;

<textarea id="userinput"></textarea>
<button id="checklines">Check Lines</button>

＆＃13;

HTML TextArea限制行数

1 个答案: