В текстареа нужно подсчитать количество строк
В текстареа нужно подсчитать количество строк.
Код
finalcode = code.value; //code получает текстареа
var lines = finalcode.split('\n').length;
работает для подсчетов переходов а не строк |
Есть варианты в сети, но не универсальные (с багами). Мне кажется нужно создавать отдельный div c шириной равной textarea и высотой определяемой содержимым. Вычислять количество строк через высоты строк и блока div, предварительно настроив css (можно наверно и без этого). А блок выводить за пределами видимой страницы. А можно идти по каждой букве в textarea окружая ее каким-то тэгом и определять Y положения этого тэга. Каждый скачок Y и будет определять новую строку.
|
Можно использовать getClientRects.
набросок: http://jsfiddle.net/wCyJt/ его, конечно, надо допиливать. в частности, для спана выставить правильный фонт (оный получить от текстареа так ) |
Цитата:
если есть переход появляется новая строка или ты хочешь учитывать только строки, в которых есть хотя бы один символ? |
Условиями задачи позволяется выставить моноширинный шрифт для текстареа?
|
спасибо. но печатаю много символов, дальше пишет один
|
но мне еще нужно учитовать когда строка появляеться после написания длиной строки, и делаеться переход автоматически
|
не имеет значения какой шрифт)
|
Цитата:
На пальцах: Допустим, N = 10 "В этом поле содержится множество букв кроме того цифры тоже есть" Получаем два длинных абзаца, которые нужно обработать, и два коротких. В первом, получаем группировку по строкам "В этом ", "поле ", "содержится", "множество ", "букв" - итого 5 строк. В последнем абзаце получим еще две строки. Всего получилось 5 + 1 + 1 + 2 = 9 строк. |
|
Вариант ... источник изменение размера textarea
добавил только вывод количества строк в прежний код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>изменение размера textarea</title>
<style type="text/css">
body {
background-color:#004B52;
}
textarea{
background-color: #FF0000;
color:yellow;
font-size: medium;
}
div{
color: #FFFFFF;
display: inline-block;
padding: 5px;
}
</style>
<script language="JavaScript" type="text/javascript">
function flexibleTextarea(b) {
var a = document.getElementById(b) || b;
if (a) {
a.style.overflow = "hidden";
a.cols = a.cols > 0 ? a.cols : 20;
var c = a.rows = a.rows > 0 ? a.rows : 2;
a.rows = 1;
b = -1;
var f = a.value;
for (a.value = ""; a.scrollHeight <= a.clientHeight && a.scrollWidth <= a.clientWidth;) {
a.value += "0";
b++
}
a.value = f;
a.rows = c;
var g = RegExp("([^\r\n]{" + b + "})([^\r\n])");
a.onkeyup = a.onkeydown = function () {
a.value = a.value.replace(g, "$1\r\n");
for (var d = 1, e = a.value; e.search(/\r?\n/) > -1;) {
d++;
e = e.replace(/\r?\n/, "")
}
a.rows = d < c ? c : d;
document.getElementById("show").innerHTML = a.rows
}
}
};
window.onload = function(){
flexibleTextarea('textarea');
}
</script>
</head>
<body>
<textarea id='textarea' rows="3" cols="50" ></textarea><div id="show">3</div>
<br />
</body>
</html>
|
Вложений: 1
Цитата:
|
|
| Часовой пояс GMT +3, время: 02:48. |