Форум

Alikberov · #1 (**permalink**) 05.09.2022, 01:00

Сaмый простой способ - поставить два TextArea рядом и в левом отображать все номера строк, имеющихся в правом, синхронизируя по скроллингу.
Однако, такой подход, хоть визуально практически не имеет глюков, крайне медленный, если довольно активно число строк растёт.

Самый быстрый способ - через OL-список, так как требуется попросту создать несколько пустых пунктов, число которых эквивалентно количеству отображаемых строк текста.
Но за месяц экспериментов я так и не смог выйти из тупика глюков.

<html>
<head>
<title>Построчная нумерация</title>
<style>
div
{
	position		:absolute;
	width			:auto;
	height			:auto;
}
header
{
	background-color:blue;
	color			:yellow;
}
footer
{
	background-color:silver;
	color			:black;
	border			:medium silver sunken;
}
</style>

</head>

<body>
<div>
<textarea rows=15 cols=105 spellcheck=false title='Текстовое поле для редактирования'>
Sed ut perspiciatis,
unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa,
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo.
Nemo enim ipsam voluptatem,
quia voluptas sit,
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos,
qui ratione voluptatem sequi nesciunt,
neque porro quisquam est,
qui dolorem ipsum,
quia dolor sit,
amet,
consectetur,
adipisci velit,
sed quia non numquam eius modi tempora incidunt,
ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse,
quam nihil molestiae consequatur,
vel illum,
qui dolorem eum fugiat,
quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus,
qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint,
obcaecati cupiditate non provident,
similique sunt in culpa, qui officia deserunt mollitia animi,
id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore,
cum soluta nobis est eligendi optio,
cumque nihil impedit,
quo minus id,
quod maxime placeat,
facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet,
ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</textarea>
</div>

<script>
// Обновляем колонку нумерации строк
HTMLTextAreaElement.prototype.updateBuddy = function() {
	// Номер строки с кареткой
	var	row = this.value.substr(0, this.selectionStart).split(/\r?\n/).length;
	// Номер символа под кареткой
	var	col = this.value.substr(0, this.selectionEnd).split(/\r?\n/).pop().length + 1;
	// Высота одной строки
	var	lineHeight = this.dataset.lineHeight;
	// Смещение по вертикали для синхронности со скролл-баром
	var	marginTop = Math.abs(lineHeight - ((this.scrollTop - (this.offsetHeight - this.clientHeight)) % (lineHeight)));
	var	i;
	var	buddy = this.previousSibling;
	// Убеждаемся в наличии колонки
	if(buddy && buddy.localName == "ol") {
		// Сверяемся количеством отображаемых строк
		if(this.rows != buddy.children.length) {
			buddy.replaceChildren();
			// Обновляем всю колонку нумерации строк
			for(i = 0; i < this.getAttribute("rows"); ++ i)
				buddy.appendChild(document.createElement("li"));
		}
		// Резервируем в текстовом поле область под "товарищескую" колонку с нумерацией строк
		this.style.paddingLeft = buddy.offsetWidth + "px";
		// Вычисляем номер самой верхней отображаемой строки текстового поля
		//buddy.start = 1 + Math.floor(this.scrollTop / (this.scrollHeight / this.value.split(/\r?\n/).length));
		buddy.start = 1 + this.scrollTop / this.dataset.lineHeight;
		buddy.style.marginTop = marginTop;
	}
	// Дальше следует чуток лишнего отладочного кода
	var	status = {
		Row			:row,
		Column		:col,
		margin		:marginTop,
		lineHeight	:lineHeight,
		scrollTop	:this.scrollTop
	}
	this.parentElement.querySelector("footer").innerHTML = Object.keys(status).map(key => `${key}:${status[key]}`).join("<br>");
}
</script>
<script>
// Добавляем колонку нумерации строк
HTMLTextAreaElement.prototype.addBuddy = function() {
	var	buddy = document.createElement("ol");
	var	header  = document.createElement("header");
	var	footer  = document.createElement("footer");
	var	rows = this.rows;
	// Узнаём точную высоту одной строчки в текстовом поле
	this.rows = 1;
	buddy.style.position = "fixed";
	// Приводим нумератор строк к общему стилю
	buddy.style.fontFamily = document.defaultView.getComputedStyle(this, null).getPropertyValue("font-family");
	buddy.style.marginTop = document.defaultView.getComputedStyle(this, null).getPropertyValue("border-top");
	// Запоминаем точное значение высоты одной строки
	// \/ - это не даёт желаемого результата - \/
	this.dataset.lineHeight = this.clientHeight;
	// \/ - это тоже не даёт желаемого результата - \/
	this.dataset.lineHeight = parseFloat(document.defaultView.getComputedStyle(this, null).getPropertyValue("font-size"));
	// Восстанавливаем предустановленное значение отображаемых строк
	this.rows = rows;
	this.style.display = "inline-block";
	// Вставляем "товарища" перед основным элементом
	this.parentElement.insertBefore(buddy, this);
	// Вставляем заголовок над основным элементом
	this.parentElement.insertBefore(header, buddy);
	header.textContent = this.title;
	// Вставляем строку статуса под основным элементом
	this.parentElement.appendChild(footer);
	// Первая инициация "товарища"
	buddy.setAttribute("name", "buddy");
	this.updateBuddy();
	this.addEventListener("mouseup",
		function(evt) {
			var	src = evt.srcElement;
			var	lineHeight = src.scrollHeight / src.value.split(/\r?\n/).length;
			var	rows = Math.floor(src.offsetHeight / lineHeight);
			// Проверяем на изменение размера мышкой
			if(src.rows != rows) {
				src.rows = rows;
				src.updateBuddy();
			}
		}
	);
	this.addEventListener("keydown",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
	this.addEventListener("scroll",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
}
</script>

<script>
document.querySelector("textarea").addBuddy();
</script>
</body>

Потому, прошу помощи в этом математическом лабиринте свойств.

voraa · #2 (**permalink**) 05.09.2022, 08:06

То, что не нумеруется первая строка - это бага или фича?

По любому строка 129 должна быть так

buddy.style.marginTop = document.defaultView.getComputedStyle(this, null).getPropertyValue("border-top-width");

(Хотя проще
buddy.style.marginTop = getComputedStyle(this, null).borderTopWidth;
)

а строка 104

buddy.style.marginTop = marginTop + 'px';

(а нужна ли она вообще?)

voraa · #3 (**permalink**) 05.09.2022, 08:19

По поводу стр 129.
Там не только в отступе (marginTop) borderTopWidth надо учитывать, но и paddingTop.

как то так должно быть

const {borderTopWidth, paddingTop} = getComputedStyle(this, null)
buddy.style.marginTop = (parseFloat(borderTopWidth) + parseFloat(paddingTop)) + 'px'

Alikberov · #4 (**permalink**) 05.09.2022, 12:42

Сообщение от voraa

То, что не нумеруется первая строка - это бага или фича?

Вoт именно, что баг!

Сообщение от voraa

По любому строка 129 должна быть так
а строка 104

(а нужна ли она вообще?)

Ничего не помогает!

На самом деле на Си в WinAPI я тоже как-то неделю боролся с подобной задачей (кажется, решил).

А в HTML/CSS никак не получается.
Вот тут в редакторе я просто (временно) пристыковал два TextArea к друг друг - выглядит вполне нормально и сколлер нормально отрабатывается (хотя и с задержкой).

И вот решил это «временное» переписать нормально…
Но, никак не получается!

Всё должно выглядить как в стандартном редакторе. Без фич и исключений.

А то у меня сейчас и последняя строка текста слева индексируется как #49, хотя внизу же указывается «Row:46»: На три единицы ошибка…

voraa · #5 (**permalink**) 05.09.2022, 16:48

<html>
<head>
<title>Построчная нумерация</title>
<style>
div
{
    position        :absolute;
    width           :auto;
    height          :auto;
}
header
{
    background-color:blue;
    color           :yellow;
}
footer
{
    background-color:silver;
    color           :black;
    border          :medium silver sunken;
}
</style>
 
</head>
 
<body>
<div>
<textarea rows=15 cols=105 spellcheck=false title='Текстовое поле для редактирования'>
Sed ut perspiciatis,
unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa,
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo.
Nemo enim ipsam voluptatem,
quia voluptas sit,
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos,
qui ratione voluptatem sequi nesciunt,
neque porro quisquam est,
qui dolorem ipsum,
quia dolor sit,
amet,
consectetur,
adipisci velit,
sed quia non numquam eius modi tempora incidunt,
ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse,
quam nihil molestiae consequatur,
vel illum,
qui dolorem eum fugiat,
quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus,
qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint,
obcaecati cupiditate non provident,
similique sunt in culpa, qui officia deserunt mollitia animi,
id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore,
cum soluta nobis est eligendi optio,
cumque nihil impedit,
quo minus id,
quod maxime placeat,
facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet,
ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</textarea>
</div>
 
<script>
// Обновляем колонку нумерации строк
HTMLTextAreaElement.prototype.updateBuddy = function() {
    // Номер строки с кареткой
    var row = this.value.substr(0, this.selectionStart).split(/\r?\n/).length;
    // Номер символа под кареткой
    var col = this.value.substr(0, this.selectionEnd).split(/\r?\n/).pop().length + 1;
    // Высота одной строки
    var lineHeight = this.dataset.lineHeight;
    // Смещение по вертикали для синхронности со скролл-баром
    var marginTop = Math.abs(lineHeight - ((this.scrollTop - (this.offsetHeight - this.clientHeight)) % (lineHeight)));
    var i;
    var buddy = this.previousSibling;
    // Убеждаемся в наличии колонки
    if(buddy && buddy.localName == "ol") {
        // Сверяемся количеством отображаемых строк
        if(this.rows != buddy.children.length) {
            buddy.replaceChildren();
            // Обновляем всю колонку нумерации строк
            for(i = 0; i < this.getAttribute("rows"); ++ i)
                buddy.appendChild(document.createElement("li"));
        }
        // Резервируем в текстовом поле область под "товарищескую" колонку с нумерацией строк
        this.style.paddingLeft = buddy.offsetWidth + "px";
        // Вычисляем номер самой верхней отображаемой строки текстового поля
        //buddy.start = 1 + Math.floor(this.scrollTop / (this.scrollHeight / this.value.split(/\r?\n/).length));
        buddy.start = 1 + this.scrollTop / this.dataset.lineHeight;
        //buddy.style.marginTop = marginTop + 'px';
    }
    // Дальше следует чуток лишнего отладочного кода
    var status = {
        Row         :row,
        Column      :col,
        margin      :marginTop,
        lineHeight  :lineHeight,
        scrollTop   :this.scrollTop
    }
    this.parentElement.querySelector("footer").innerHTML = Object.keys(status).map(key => `${key}:${status[key]}`).join("<br>");
}
</script>
<script>
// Добавляем колонку нумерации строк
HTMLTextAreaElement.prototype.addBuddy = function() {
    var buddy = document.createElement("ol");
    var header  = document.createElement("header");
    var footer  = document.createElement("footer");
    var rows = this.rows;
    // Узнаём точную высоту одной строчки в текстовом поле
    this.rows = 1;
    buddy.style.position = "absolute";
    // Приводим нумератор строк к общему стилю
    buddy.style.fontFamily = document.defaultView.getComputedStyle(this, null).getPropertyValue("font-family");
    const mt = getComputedStyle(this, null).borderTopWidth;
    const pb = getComputedStyle(this, null).paddingBottom;
    //document.defaultView.getComputedStyle(this, null).getPropertyValue("border-top-width");
    
    buddy.style.marginTop = (parseFloat(mt) + parseFloat(pb)) +'px';
    // Запоминаем точное значение высоты одной строки
    // \/ - это не даёт желаемого результата - \/
    this.dataset.lineHeight = this.clientHeight;
    // \/ - это тоже не даёт желаемого результата - \/
    this.dataset.lineHeight = parseFloat(document.defaultView.getComputedStyle(this, null).getPropertyValue("font-size"));
    // Восстанавливаем предустановленное значение отображаемых строк
    this.rows = rows;
    this.style.display = "inline-block";
    // Вставляем "товарища" перед основным элементом
    this.parentElement.insertBefore(buddy, this);
    // Вставляем заголовок над основным элементом
    this.parentElement.insertBefore(header, buddy);
    header.textContent = this.title;
    // Вставляем строку статуса под основным элементом
    this.parentElement.appendChild(footer);
    // Первая инициация "товарища"
    buddy.setAttribute("name", "buddy");
    this.updateBuddy();
    this.addEventListener("mouseup",
        function(evt) {
            var src = evt.srcElement;
            var lineHeight = src.scrollHeight / src.value.split(/\r?\n/).length;
            var rows = Math.floor(src.offsetHeight / lineHeight);
            // Проверяем на изменение размера мышкой
            if(src.rows != rows) {
                src.rows = rows;
                src.updateBuddy();
            }
        }
    );
    this.addEventListener("keydown",
        function(evt) {
            var src = evt.srcElement;
            src.updateBuddy();
        }
    );
    this.addEventListener("scroll",
        function(evt) {
            var src = evt.srcElement;
            src.updateBuddy();
        }
    );
}
</script>
 
<script>
document.querySelector("textarea").addBuddy();
</script>
</body>

Вроде так лучше.
Что не так?

Alikberov · #6 (**permalink**) 05.09.2022, 17:00

Идеально должно быть так:

<html>
<head>
<title>Построчная нумерация</title>
<style>
div
{
	position		:absolute;
	width			:auto;
	height			:auto;
}
header
{
	background-color:blue;
	color			:yellow;
}
footer
{
	background-color:silver;
	color			:black;
	border			:medium silver sunken;
}
</style>

</head>

<body>
<div>
<textarea rows=15 cols=90 spellcheck=false title='Текстовое поле для редактирования'>
Sed ut perspiciatis,
unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa,
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo.
Nemo enim ipsam voluptatem,
quia voluptas sit,
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos,
qui ratione voluptatem sequi nesciunt,
neque porro quisquam est,
qui dolorem ipsum,
quia dolor sit,
amet,
consectetur,
adipisci velit,
sed quia non numquam eius modi tempora incidunt,
ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse,
quam nihil molestiae consequatur,
vel illum,
qui dolorem eum fugiat,
quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus,
qui blanditiis praesentium voluptatum deleniti atque corrupti,
quos dolores et quas molestias excepturi sint,
obcaecati cupiditate non provident,
similique sunt in culpa, qui officia deserunt mollitia animi,
id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore,
cum soluta nobis est eligendi optio,
cumque nihil impedit,
quo minus id,
quod maxime placeat,
facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet,
ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
repellat.
</textarea>
</div>

<script>
// Обновляем колонку нумерации строк
HTMLTextAreaElement.prototype.updateBuddy = function() {
	// Номер строки с кареткой
	var	row = this.value.substr(0, this.selectionStart).split(/\r?\n/).length;
	// Номер символа под кареткой
	var	col = this.value.substr(0, this.selectionEnd).split(/\r?\n/).pop().length + 1;
	var	i = 0;
	var	buddy = this.previousSibling;
	// Убеждаемся в наличии колонки
	if(buddy && buddy.localName == "textarea") {
		// Сверяемся количеством отображаемых строк
		if(this.rows != buddy.rows || this.scrollHeight != buddy.scrollHeight || this.offsetHeight != buddy.offsetHeight) {
			buddy.rows = this.rows;
			buddy.cols = this.value.split(/\r?\n/).length.toString().length;
			// Обновляем всю колонку нумерации строк
			buddy.value = this.value.replace(/^.*$/gm, () => ++ i);
			// Выравниваем поле слева под нумерацию строк
			this.style.paddingLeft = buddy.offsetWidth;
			buddy.style.height = this.offsetHeight + "px";
		}
		buddy.scrollTop = this.scrollTop;
	}
	// Дальше следует информирование о позиции каретки
	var	status = {
		Row			:row,
		Column		:col
	}
	this.parentElement.querySelector("footer").innerHTML = Object.keys(status).map(key => `${key}:${status[key]}`).join("|");
}
</script>
<script>
// Добавляем колонку нумерации строк
HTMLTextAreaElement.prototype.addBuddy = function() {
	var	buddy = document.createElement("textarea");
	var	header  = document.createElement("header");
	var	footer  = document.createElement("footer");
	buddy.style.position = "fixed";
	buddy.style.overflow = "hidden";
	buddy.style.textAlign = "right";
	buddy.style.resize = "none";
	buddy.disabled = true;
	this.style.display = "inline-block";
	// Вставляем "товарища" перед основным элементом
	this.parentElement.insertBefore(buddy, this);
	// Вставляем заголовок над основным элементом
	this.parentElement.insertBefore(header, buddy);
	header.textContent = this.title;
	// Вставляем строку статуса под основным элементом
	this.parentElement.appendChild(footer);
	// Первая инициация "товарища"
	buddy.setAttribute("name", "buddy");
	this.updateBuddy();
	this.addEventListener("mousemove",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
	this.addEventListener("keydown",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
	this.addEventListener("keyup",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
	this.addEventListener("scroll",
		function(evt) {
			var	src = evt.srcElement;
			src.updateBuddy();
		}
	);
}
</script>

<script>
document.querySelector("textarea").addBuddy();
</script>
</body>

Aetae · #7 (**permalink**) 05.09.2022, 18:51

У вас всё дрожит дёргается и скачет. Возьми любой готовый редактор на textarea и посмотри как там.

Alikberov · #8 (**permalink**) 05.09.2022, 19:30

Сообщение от Aetae

У вас всё дрожит дёргается и скачет. Возьми любой готовый редактор на textarea и посмотри как там.

Готовoго решения я как-то не нашёл.

Adding Line Numbers To HTML Textarea

Почему вообще за четверть века не ввели в спецификацию стиля с флагом отображения этих номеров?
Всюду нужно подключать сторонние библиотеки с кучей кода…

P.S.: Несчастный Math.sign появился совсем недавно.
И что мешало его давно ввести?

voraa · #9 (**permalink**) 05.09.2022, 20:06

Сообщение от Alikberov

Несчастный Math.sign появился совсем недавно.
И что мешало его давно ввести?

Ну вроде в 2013-2014г.
А может он просто не нужен особо был?

Вообще понятие строки довольно размытое.
Что является строкой - то, что выглядит как строка, или это текст от \n до \n?
Во всех редакторах, которые показывают номера строк - это второе. У вас - первое.
Если очень длинная строка занимает в визуальном узком окне несколько строк, то номер имеет только первая часть строки, а те, что перенесены идут без своих номеров, т.к это часть той же строки. А следующий номер имеет следующая строка, которая идет после \n.
А какой смысл в ваших номерах, если эти номера зависят не от реального количества строк, а от ширины окна? На такой номер нельзя сослаться.

Alikberov · #10 (**permalink**) 05.09.2022, 20:25

Сообщение от voraa

Ну вроде в 2013-2014г.

Относительнo недавно. Гораздо позднее, чем появились контексты Canvas, Audio, Video.

Сообщение от voraa

А может он просто не нужен особо был?

Ну, в Бейсике оно было всегда. А в JS иногда бывали моменты, где с этим было бы проще.

Сообщение от voraa

Вообще понятие строки довольно размытое.
Что является строкой - то, что выглядит как строка, или это текст от \n до \n?
Во всех редакторах, которые показывают номера строк - это второе.

Для активной разработки - очень важны.

Сообщение от voraa

Если очень длинная строка занимает в визуальном узком окне несколько строк, то номер имеет только первая часть строки, а те, что перенесены идут без своих номеров, т.к это часть той же строки. А следующий номер имеет следующая строка, которая идет после \n.
А какой смысл в ваших номерах, если эти номера зависят не от реального количества строк, а от ширины окна? На такой номер нельзя сослаться.

Вот это - большая проблема. И каждый решает её сам, так как до сих пор стандартного алгоритма (встроенного) не предоставили.

Форум

Справочник

Discord чат

Курсы javascript