Html textarea номера строк

Adding Line Numbers to HTML Textarea

Man I wasted so much time on using javascript when css magic would just have done the trick.

body background-color: #000; 
height: 100vh; 
width: 100vw; 
margin: 0px;
>

.editor-wrapper height: 100vh; 
width: 100vw; 
overflow-y: auto; 
counter-reset: line;
>
.editor margin: 0; 
border: 0; 
padding: 0; 
outline: 0; 
list-style: none;
 
height: 100%; 
width: 100%; 
word-wrap: break-word; 
word-break: break-all;
 
font-size:2rem; 
line-height: 1.5em; 
font-feature-settings: common-ligatures; 
-ms-font-feature-settings: common-ligatures; 
color:rgba(255, 255, 255, 0.7); 
resize:none;

>

.editor div padding-left: 5rem; 
position: relative;
>

.editor div::before counter-increment: line; 
content: counter(line); 
font-size: 1em; 
user-select: none; 
width: 5rem; 
text-align: right; 
left: 0;
 
position: absolute;
>

Textarea with alternate rows and line numbers

You could combine them by wrapping your textarea in a div then assign the stripped background styles to that wrapping div, so the 2 backgrounds are like layered.

textarea < background: url(http://i.imgur.com/2cOaJ.png); background-attachment: local; background-repeat: no-repeat; padding-left: 35px; padding-top: 10px; border-color: #ccc;
font-size: 13px; line-height: 16px;>
.textarea-wrapper

How can I add line numbers to a textarea using an ordered list?

It’s important to set the margin and padding of both textarea and the ol to 0. Because font properties are not inherited by textarea , you need to set them to inherit .

.container position: relative; 
margin: 20px; 
font-family:"Lucida Console", Monaco, monospace; 
font-size: 100%; 
line-height: 120%; 
> 
.container .list position: absolute; 
left: 0; 
top: 0; 
z-index: 2; 
width: 25px; 
background-color: green; 
> 
.container .list ol margin: 0; 
padding: 0; 
list-style-position: inside; 
font-family: inherit; 
font-size: inherit; 
line-height: inherit; 
> 
.container .list ol li padding-left:5px; 
> 
.container .textarea position: absolute; 
z-index: 1; 
left: 0; 
top: 0; 
> 
.container .textarea textarea < 
width:300px; 
height: 200px; 
margin: 0; 
padding: 0 0 0 30px; 
font-family: inherit; 
font-size: inherit; 
line-height: inherit; 
border: 1px solid black; 
 
>

Display Line number in textarea without jquery

textarea
 background: url(http://i.imgur.com/2cOaJ.png); 
background-attachment: local; 
background-repeat: no-repeat; 
padding-left: 35px; 
padding-top: 10px; 
border-color:#ccc; 
line-height:16px;
>

How to add line numbers to textarea only with pure Javascript?

From what I gathered from your question this what I believe you need. Hopefully it will get you going in the right direction.

var textAreaID = "user-input";
//turn the text area content into an arrayvar content = document.getElementById(textAreaID).innerHTML.split("\n");
//create array to hold new Contentvar newContent = [];
//loop through and add line numbersfor (var i = 0; i < content.length; i++) < //begin for loop
 
//append the line numbers and the new value to the newContent array newContent.push((i + 1) + content[i] + "\n");

> //end for loop

//update the content of textArea with line numbersdocument.getElementById(textAreaID).innerHTML = newContent.join("");

 
Hello is it working? 
I think so.

Display line number in textarea

Download the plugin found here: http://alan.blog-city.com/jquerylinedtextarea.htm

$(function()  
// Target all classed with ".lined" 
$(".lined").linedtextarea( 
 
);
 
// Target a single one 
$("#mytextarea").linedtextarea();

>);

Fully functional demo: http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.html (web.archive)

Getting Line Number In Text Area

This works with button click. Stolen from Find out the ‘line’ (row) number of the cursor in a textarea

​function getline()
 var t = $("#t")[0]; 
alert(t.value.substr(0, t.selectionStart).split("\n").length);
>​

​
there is no
love in the ghetto
so come here
and get it 
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Источник

Html textarea номера строк

БлогNot. Элемент textarea с нумерацией строк для листингов — а надо ли?

Элемент textarea с нумерацией строк для листингов — а надо ли?

Можно использовать также JS-редактор CodeMirror или подобное, скажем, Ace.

Можно подложить фоновую картинку под textarea, как индус, но вертикальное смещение будет отличаться при разных размерах текста в элементе у разных браузеров и при разных системных шрифтах по умолчанию!

Есть комбинированные решения на JS+CSS, но тоже кривовато, особенно если учесть, что современный браузер предоставляет возможность тянуть textarea за уголок, которую не во всех браузерах можно отключить.

По-моему, проблема решается проще, если отказаться от идеи непременно использовать для листинга textarea . Особенно если мы собрались листинг только отображать, а не редактировать на странице.

Наверное, предложенный способ только на CSS не очень удобен при ручной разметке, но для «зашития» в движок вполне подойдёт.

Итак, просто определяем в стиле два CSS-класса:

И потом в теге pre с классом lst применяем к каждой строке листинга второе стилевое указание:

Вышло вот что, в том числе, и в IE сработало, правда, в IE11 текст не выделяется отдельно от номеров строк 🙁 В Firefox вообще всё хорошо, в «Хромом» после вставки скопированного листинга в текстовый редактор между строками оказываются «лишние» пустые строки.

классы CSS для нумерации строк листинга

05.09.2019, 12:51 [2221 просмотр]

Источник

Html добавление номеров строк в textarea

У меня есть текстовая область, как в коде ниже, как отображать номера строк в левой части.

9 ответов

Есть плагин Lined TextArea для jQuery от Алана Уильямсона
Лицензия MIT
jQuery 1.3+

Вы можете очень хорошо попробовать Code Mirror, библиотеку JavaScript для встраивания редактора кода в веб-страницу.

Со строками кода у этого есть большие особенности как

• Автозаполнение
• Темы
• Смешанные языковые режимы
• Поиск
• Интерфейс слияния / различий
• Пользовательские полосы прокрутки и т. Д.

Это очень простой, но эффективный трюк. Вставляет изображение с уже добавленными номерами строк.

Единственная загвоздка в том, что вам может потребоваться создать собственное изображение, соответствующее дизайну вашего интерфейса.

TL; DR: используйте CodeMirror

Кто-то здесь порекомендовал CodeMirror, и я не могу рекомендовать его в достаточной степени! Но в этом ответе не было никаких технических подробностей.

Другие решения: у всего, что я пробовал здесь, есть проблемы с номерами строк, которые не совпадают с линиями. Я считаю, что это потому, что у меня монитор DPI (точек на дюйм) составляет 120%, и эти решения не учитывали это.

Итак, как использовать CodeMirror. Легкий! Достаточно взглянуть на 21000 слов документации! Я надеюсь объяснить 99% ваших вопросов менее чем на странице или двух.

Демо!

100% рабочая демонстрация, и она отлично работает в песочнице StackOverflow:

TL; DR: как использовать CodeMirror на странице или меньше

Шаг 1 — Загрузите базовые библиотеки ядра

И, если вам нравится согласование цветов с дополнительными скобками, также загрузите это:

Шаг 2 — Настройка подсветки синтаксиса

Проверить /codemirror-5.62.0/mode/ dir, чтобы узнать, какой язык соответствует языку, на котором вы будете кодировать. В этой области имеется обширная поддержка .

Добавьте это в свой блокировать.

Шаг 3 — Инициализация и отображение CodeMirror

Есть текстовое поле для использования .

Инициализируйте и установите свое зеркало кода в JS. Вам нужно использовать Mimetype, чтобы указать режим, который вы хотите использовать, в этом случае я указываю Perl Mimetype .

var editor = CodeMirror.fromTextArea(document.getElementById('code'), < lineNumbers: true, mode: 'text/x-perl', matchBrackets: true, >); 

Шаг 4 — Выберите тему

Выберите понравившуюся тему, ‘cobalt’ а также ‘abbott’ обе являются довольно приличными темами для темного режима. Запустите это после определения editor .

editor.setOption('theme', 'cobalt'); 

Никто не пытался сделать это с помощью объекта HTML5 Canvas и рисования на нем номеров строк. Итак, вот что мне удалось собрать за несколько часов. Поместите холст и текстовое поле один рядом с другим и нарисуйте числа на холсте.

true есть ограничение: мы не можем легко справиться с переносом слов в функции Paint() без итерации всего содержимого текстового поля и переноса изображения на зеркальный объект для измерения высоты каждой строки. Также будет получен очень сложный код.

function generateWithNumber() < let inputTexts = document.getElementById("input").value let textsByLine = inputTexts.split("\n"); const listMarkup = makeUL(textsByLine); document.getElementById("output").appendChild(listMarkup); >function makeUL(array) < let list = document.createElement('ol'); for (let i = 0; i < array.length; i++) < let item = document.createElement('li'); item.appendChild(document.createTextNode(array[i])); list.appendChild(item); >return list; > // document.getElementById('foo').appendChild(makeUL(options[0]));

CodePress — это тот, который используется в WordPress.

Номера строк

Код:

Это на самом деле работает довольно хорошо.

Номера строк не появляются мгновенно, но это работает довольно быстро.

Однако, ::marker стиль кажется ограниченным ( list-style-type ). Например, удаление точки или vertical-align: super кажется, нужны другие обходные пути (назад к li:before и counter ).

Также, насколько я понимаю, в codemirror просто работает в фоновом режиме (Pseudo contenteditable: как работает codemirror?).

Источник

Как пронумеровать строки в textarea?

Нужно максимально приблизить textarea к виду html-редактора.

Я знаю, что есть куча готовых решений по этому вопросу, но каждое заменяет этот элемент другим, и у меня не получается к нему в последствии обращаться (нужно кнопками выделять определенные части текста).

Так что ищу:
1. Простые решения по нумерации строк в textarea (например, создать еще одну textarea рядом и как-то синхронизировать).
2. Возможно, код для выделения html тегов (но это не обязательно).
3. Готовые решения по этой теме с возможностью впоследствии как-то обратиться к получившемуся элементу.
4. Ссылки на полезные примеры/методы.

   ваш код тут  

с textarea лучше такого не делать, смотрите codemirror, вот api

codemirror сам предлагает из textarea создать это окошко и, как я понимаю, сам потом textarea и формирует, но я не знаю, как к нему обратиться в js

а как тогда к получившемуся элементу обращаться и менять в нем положение курсора? (а еще нужно вложить в него текст из файла, делаю это с помощью php)

@iDennis простите, туплю. но как мне использовать этот метод doc.setCursor(pos: |number, ?ch: number, ?options: object)?
Как ни пробую, ошибку выдает. Допустим, нужно поставить на букву под номером 52.
Если в скрипте пишу doc.setCursor(number, 52), пишет, что doc undefined. Как правильно сформулировать метод? Спасибо! 🙂

мне нужно переставлять курсор в зависимости от ключевого слова, это задается программно, их несколько. Я использую метод IndexOf(), потому что он дает возможность ставить начальную точку поиска, но он выдает только номер символа, без строки.

Источник