如何精確控制textarea的行數，若輸入超過指定的行數，則禁止輸入？

用戶在textarea中輸入內容，用戶可以手動敲回車換行，當內容超過一行也會自動換行。如何控制用戶輸入的行數，當大於指定行的時候禁止用戶再輸入。

看到stackoverflow上有人用div作為容器解決了這個問題，想問能不能不用div，就用textarea來實現。

HTML

&
&& &

CSS

#container {
height:100px;
width:300px;
cursor:text;
border:1px solid #000
}
#rev {
line-height:20px;
outline:none
}


JS

$(document).ready(function () {
$("#container").click(function() {
$("#rev").focus();
});

var limit = 3;
var lineHeight = parseInt($("#rev").css("line-height"));

$("#rev").keydown(function (e) {
var totalHeight = parseInt($("#rev").height());
var linesUsed = totalHeight / lineHeight;

if (e.keyCode == 13 linesUsed &>= limit) {
$("#rev").css("color", "red");
return false;
} else {
$("#rev").css("color", "");
}
});
});


---

能。

此問題無非是如何得到textarea當前的行數。由於要求軟回車也計算在內，光計算textarea.value包含多少回車是不可行的。需要找到辦法計算實際屏幕顯示的行數。順著這個思路去找吧，少年。

---

@李智豐 提到的腦洞的超粗糙版實現：JS Bin - Collaborative JavaScript Debugging

這個方法要求明確指定 line-height，因為初始值是 normal，瀏覽器實現不保證相同。

另外，可以利用 Selection.modify() 這個介面來找到渲染時實際出現的「行」（granularity = "lineboundary"），但兼容性有限。

---

有個dirty的思路。

弄個visibility為hidden的css相同的textarea實時同步內容，並且overflow設為scroll初始height設1px， oninput時用scrollHeight/lineHeight實時監控行數。

沒驗證過，純屬腦洞。。。

---

為什麼要控制行呢？ 這樣你怎麼讓後台驗證？

或者可以弄成 隨著輸入自動增加高度的效果！

地鐵 占坑 回家答

"use strict";
var getTextextareareaContentHeight = function( textarea, scanAmount ) {
var origHeight = textarea.style.height,
height = textarea.offsetHeight,
scrollHeight = textarea.scrollHeight,
origOverflow = textarea.style.overflow;

if ( height &< scrollHeight ) { return scrollHeight; }else{ textarea.style.height = (height + scanAmount) + "px"; textarea.style.overflow = "hidden"; // 原理就是 一點一點讓 scrollHeight = height while (textarea.offsetHeight &>= textarea.scrollHeight) {
textarea.style.height = (height -= scanAmount)+"px";
}

while (textarea.offsetHeight &< textarea.scrollHeight) { textarea.style.height = (height++)+"px"; } /// reset textarea.style.height = origHeight; textarea.style.overflow = origOverflow; return height; } }; var style = window.getComputedStyle(textextarearea), textextareareaLineHiehgt = style.lineHeight; textextareareaLineHiehgt = ((textextareareaLineHiehgt === "norma" ? (1.2 * style.fontSize) : textextareareaLineHiehgt), 10); var textextareareaContentHeight = getTextextareareaContentHeight(textextarearea, textextareareaLineHiehgt), var numberOfLines = Math.ceil(textextareareaContentHeight / textextareareaLineHiehgt);

---

根據我個人對題目要求的理解，就是只採用textarea而不需要額外的div的實現。

以下是我的實現，就是簡簡單單監聽了onscroll事件;

第一步：需要一個textArea

第二步：需要監聽 textarea的 onscroll事件

1.設置textArea不要出現滾動條：overflow="hidden"，需要說明的是，即使是控制不出現滾動條，但是監聽onscroll事件還是有效的。

2.裡面要指定你需要的行數：textArea.rows=x;(我這裡的x=2)。

3.加個flag附上代碼：Link-Fight.github.io/16-03-06.html at master · Link-Fight/Link-Fight.github.io · GitHub

---

弄個div visibility none contenteditable。 然後input 同步內容。 就可以獲得高度處以寬度即可。 都是關鍵字....

---

用overflow:hidden來隱藏一個div和textarea等寬，每次teatarea觸發input事件時，把值賦給這個div，記得
要轉換為br，然後計算div的高度除以行高就可以了。

---

推薦閱讀：