限制textarea中的行數
[英]Limiting number of lines in textarea
問題描述
我正在尋找一個可以限制用戶能夠在 textarea 中輸入的行數的 javascript（我的意思是通過用戶在鍵盤上按回車鍵結束的一些文本）。 我找到了一些解決方案，但它們根本不起作用或表現得非常奇怪。 最好的解決方案是一個可以完成這項工作的 jquery 插件 - 類似於CharLimit ，但它應該能夠限制文本行數而不是字符數。
8 個解決方案
解決方案1
23 已采納 2009-02-17 15:03:04
這可能會有所幫助（可能最好使用 jQuery、onDomReady 並且不顯眼地將 keydown 事件添加到 textarea）但在 IE7 和 FF3 中進行了測試：
<html>
<head><title>Test</title></head>
<body>
<script type="text/javascript">
var keynum, lines = 1;
function limitLines(obj, e) {
// IE
if(window.event) {
keynum = e.keyCode;
// Netscape/Firefox/Opera
} else if(e.which) {
keynum = e.which;
}
if(keynum == 13) {
if(lines == obj.rows) {
return false;
}else{
lines++;
}
}
}
</script>
<textarea rows="4" onkeydown="return limitLines(this, event)"></textarea>
</body>
</html>
*編輯 - 解釋：如果按下 ENTER 鍵，它會捕獲按鍵，如果 textarea 中的行與 textarea 的行數相同，則不會添加新行。 否則它會增加行數。
編輯#2：考慮到人們仍然會來回答這個問題，我想我會盡可能地更新它以處理粘貼、刪除和剪切。
<html>
<head>
<title>Test</title>
<style>
.limit-me {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<textarea rows="4" class="limit-me"></textarea>
<script>
var lines = 1;
function getKeyNum(e) {
var keynum;
// IE
if (window.event) {
keynum = e.keyCode;
// Netscape/Firefox/Opera
} else if (e.which) {
keynum = e.which;
}
return keynum;
}
var limitLines = function (e) {
var keynum = getKeyNum(e);
if (keynum === 13) {
if (lines >= this.rows) {
e.stopPropagation();
e.preventDefault();
} else {
lines++;
}
}
};
var setNumberOfLines = function (e) {
lines = getNumberOfLines(this.value);
};
var limitPaste = function (e) {
var clipboardData, pastedData;
// Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
var pastedLines = getNumberOfLines(pastedData);
// Do whatever with pasteddata
if (pastedLines <= this.rows) {
lines = pastedLines;
this.value = pastedData;
}
else if (pastedLines > this.rows) {
// alert("Too many lines pasted ");
this.value = pastedData
.split(/\r\n|\r|\n/)
.slice(0, this.rows)
.join("\n ");
}
};
function getNumberOfLines(str) {
if (str) {
return str.split(/\r\n|\r|\n/).length;
}
return 1;
}
var limitedElements = document.getElementsByClassName('limit-me');
Array.from(limitedElements).forEach(function (element) {
element.addEventListener('keydown', limitLines);
element.addEventListener('keyup', setNumberOfLines);
element.addEventListener('cut', setNumberOfLines);
element.addEventListener('paste', limitPaste);
});
</script>
</body>
</html>
解決方案2
16 2011-06-27 06:13:11
如何使用 jQuery 做到這一點：
綁定到 textarea 的 keyDown 事件。
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
解決方案3
7 2013-09-06 20:52:18
jQuery 示例。 這適用於打字和粘貼。
//Limit to # of rows in textarea or arbitrary # of rows
$('#yourtextarea').bind('change keyup', function(event) {
//Option 1: Limit to # of rows in textarea
rows = $(this).attr('rows');
//Optiion 2: Limit to arbitrary # of rows
rows = 6;
var value = '';
var splitval = $(this).val().split("\n");
for(var a=0;a<rows && typeof splitval[a] != 'undefined';a++) {
if(a>0) value += "\n";
value += splitval[a];
}
$(this).val(value);
});
解決方案4
6 2012-12-18 22:24:27
此解決方案有效：
<script type="text/javascript">
function limitTextarea(textarea, maxLines, maxChar) {
var lines = textarea.value.replace(/\r/g, '').split('\n'), lines_removed, char_removed, i;
if (maxLines && lines.length > maxLines) {
lines = lines.slice(0, maxLines);
lines_removed = 1
}
if (maxChar) {
i = lines.length;
while (i-- > 0) if (lines[i].length > maxChar) {
lines[i] = lines[i].slice(0, maxChar);
char_removed = 1
}
if (char_removed || lines_removed) {
textarea.value = lines.join('\n')
}
}
}
</script>
和文本區域將是
<asp:TextBox ID="myWishTB" runat="server" Height="185px" TextMode="MultiLine"
Style="overflow: auto;" Width="95%"
onkeyup="limitTextarea(this,10,80)">
</asp:TextBox>
在常規 HTML 中：
<textarea id="textareaID" onkeyup="limitTextarea(this,5,100)" cols="20" rows="5"> </textarea>
解決方案5
4 2011-08-09 15:42:23
（用jquery完成）。 它並不完美，但關心包裝。 不僅僅取決於行尾 (\\n)。
如果 textarea 中的 css 溢出屬性不是自動的，則 jquery 滾動事件在 mozilla 和 firefox 中存在問題，否則刪除相應的行並設置溢出隱藏。 可以幫助 css resize:none 和固定高度。
$('#textarea').scroll(function () {
$(this).css("overflow", "hidden"); /* for the mozilla browser problem */
$(this).animate({scrollTop: $(this).outerHeight()});
while ($(this).scrollTop() > 0) { /* for the copy and paste case */
lines=$(this).val().slice(0,-1);
$(this).val(lines);
}
$(this).css("overflow", "auto"); /* For the mozilla browser problem */
});
解決方案6
3 2009-02-17 13:31:48
給定文本塊的可見/顯示行數會因不同的瀏覽器、使用的字體等而異。您必須至少設置特定的字體和字體大小，以便能夠半可靠地計數顯示線。
更新：我看到了編輯。 那么像 kevchadders 代碼這樣的東西應該對你有用。 您將需要 js 來計算字符和 '\\r\\n's 並檢查用戶定義的限制。 此外，如果您不使用他的腳本，請確保您使用的腳本涉及時間間隔檢查和/或 textarea 的 onKeyDown/onKeyUp 事件。 這可能就是您測試過的某些腳本似乎“行為異常”的原因。
解決方案7
1
這與使用 jQuery 的 Ivan 的回答基本相同。 我為我自己的項目測試了它； 似乎工作正常。
<script type="text/javascript" charset="utf-8">
$(function()
{
function getLines(id)
{
return $('#' + id).val().split("\n").length
}
$('#testing').keyup(function()
{
var allowedNumberOfLines = 4;
if(getLines('testing') > allowedNumberOfLines)
{
modifiedText = $(this).val().split("\n").slice(0, allowedNumberOfLines);
$(this).val(modifiedText.join("\n"));
}
});
});
</script>
解決方案8
1 2011-12-03 23:38:44
我對其進行了一些擴展，以在沒有手動換行的情況下檢測溢出。 這是針對帶有“溢出：隱藏”的固定大小的文本區域。
目前，如果字體不適合 textarea，我的解決方案會使字體變小。 如果可能的話，讓它再次變大。
var keynum, allowedLines = 5, defaultFontSize = 13/*px*/;
$(document).ready(function() {
$("textarea").keydown(function(e, obj) {
if(window.event)
keynum = e.keyCode;
else if (e.which)
keynum = e.which;
if (keynum == 13 && allowedLines <= $(this).val().split("\n").length)
return false;
});
$("textarea").keyup(function(e, obj) {
// Avoid copy-paste
if (allowedLines < $(this).val().split("\n").length) {
lines = $(this).val().split("\n").slice(0, allowedLines);
$(this).val( lines.join('\n') );
}
// Check overflow
if ((this.clientHeight < this.scrollHeight)) {
while ((this.clientHeight < this.scrollHeight)) {
currFontSize = $(this).css('font-size');
finalNum = parseFloat(currFontSize, 11);
stringEnding = currFontSize.slice(-2);
$(this).css('font-size', (finalNum-1) + stringEnding);
}
} else if ($(this).css('fontSize') != defaultFontSize+'px') {
while ($(this).css('font-size') != defaultFontSize+'px') {
// First lets increase the font size
currFontSize = $(this).css('font-size');
finalNum = parseFloat(currFontSize, 11);
stringEnding = currFontSize.slice(-2);
$(this).css('font-size', (finalNum+1) + stringEnding);
// lets loop until its enough or it gets overflow again
if(this.clientHeight < this.scrollHeight) {
// there was an overflow and we have to recover the value
$(this).css('font-size', currFontSize);
break;
}
}
}
});
});
在textarea中限制單行中的行數和字母數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.