テキストエリアの行数を制限する
行数を制限できるjavascriptを探しています（行ごとに、ユーザーがキーボードのEnterキーを押すことで終了するテキストを意味します）。ユーザーはtextareaに入力できます。私はいくつかの解決策を見つけましたが、それらは単に機能しないか、本当に奇妙な動作をします。最善の解決策は、 CharLimit のような作業を実行できるjqueryプラグインですが、文字数ではなくテキスト行数を制限できるはずです。
このmightヘルプ（おそらく、jQuery、onDomReadyを使用して、控えめにtextdownにkeydownイベントを追加する）が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>
jQueryでそれを行う方法：
TextareaのkeyDownイベントにバインドします。
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
このソリューションは機能します：
<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>
（jqueryで完了）。完璧ではありませんが、ラッピングが重要です。行末（\ n）のみをデペンディングしない。
jquery scrollイベントは、textareaのcss overflowプロパティがautoでない場合、mozillaおよびfirefoxで問題が発生します。そうでない場合、対応する行を削除し、オーバーフローを非表示に設定します。 cssのサイズ変更：なし、高さの固定に役立ちます。
$('#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 */
});
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);
});
特定のテキストブロックの表示/表示行の数は、ブラウザ、使用するフォントなどによって異なります。特定のフォントとフォントサイズを設定する必要があります。行を表示します。
更新：編集が表示されます。それから、kevchaddersコードのようなものはあなたのためにうまくいくはずです。文字と '\ r\n'をカウントし、ユーザー定義の制限に照らしてチェックするjsが必要です。また、彼のスクリプトを使用しない場合は、時間間隔のチェックまたはテキストエリアのonKeyDown/onKeyUpイベントのいずれかまたは両方を含むスクリプトを使用してください。これが、テストしたいくつかのスクリプトが「奇妙に動作する」ように見える理由かもしれません。
これは、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>
手動で改行せずにオーバーフローを検出するために少し拡張しました。これは、「オーバーフロー：非表示」の固定サイズのテキストエリア用です。
現在のところ、私のソリューションでは、テキストエリアに収まらない場合はフォントを小さくしています。そして、可能であれば再び大きくします。
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;
}
}
}
});
});