Я ищу javascript, который может ограничить количество строк (по строке я имею в виду текст, законченный пользователем, нажимая клавишу ввода на клавиатуре), пользователь может войти в текстовое поле. Я нашел некоторые решения, но они просто не работают или ведут себя действительно странно. Лучшим решением будет плагин jquery, который может выполнять работу - что-то вроде CharLimit, но он должен иметь возможность ограничить количество строк текста, а не количество символов.
Спасибо заранее.
Это может помочь (возможно, лучше всего использовать jQuery, onDomReady и ненавязчиво добавить событие 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, и просто не добавляет новую строку, если строки в текстовом поле совпадают с строками текстового поля. Иначе он увеличивает количество строк.
Как это сделать с помощью jQuery:
Привязать к событию textDown 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>
Количество видимых/отображаемых строк для данного блока текста будет различаться в зависимости от разных браузеров, используемых шрифтов и т.д. Вы должны установить, по крайней мере, определенный шрифт и размер шрифта, чтобы иметь возможность полу - достоверно рассчитать отображаемые строки.
UPDATE: Я вижу редактирование. Тогда что-то вроде кода кевхаддерсов должно делать хорошо для вас. Вам понадобятся js, который подсчитывает символы и "\ r\n" и проверяет ограничение пользователя. Кроме того, если вы не используете его script, убедитесь, что вы используете его, который включает проверку времени и/или события onKeyDown/onKeyUp в текстовом поле. Возможно, поэтому некоторые скрипты, которые вы тестировали, "ведут себя странно".
(Готово с jquery). Это не идеально, но заботится об упаковке. Не deppending только конца строки (\n). У jquery scroll event есть проблемы в mozilla и firefox, если свойство css overflow в textarea не является auto, в противном случае удалите соответствующие строки и скройте переполнение. Может помочь изменить размер 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. Я тестировал его для собственного проекта; кажется, работает нормально.
<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>
Пример 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);
});
Я немного расширил его, чтобы обнаружить даже переполнение без ручного разбиения строк. Это для текстового поля фиксированного размера с "переполнением: скрытым".
В настоящее время мое решение уменьшает шрифт, если он не подходит для 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;
}
}
}
});
});