HTML / CSS / JS: Как создать иллюзию текстовой области с номерами строк? - PullRequest
Новая
       49

HTML / CSS / JS: Как создать иллюзию текстовой области с номерами строк?

5 голосов
/ 15 декабря 2009

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

Куда мне идти? Как бы вы это сделали?

Ответы [ 6 ]

3 голосов
/ 15 декабря 2009

Я бы начал с двух текстовых областей и механизма синхронизации. Как то так, 

    <script>
    window.sync = function(e){
            var textarea = document.getElementById("lines");
            var source   = document.getElementById("some_text_area");
            textarea.scrollTop = source.scrollTop;
        }

        window.populate = function populate(){
            if(populate.started){
                return;
            }

            populate.started = true;
            var textarea = document.getElementById("lines");
            var str = '';
            for(var i=0;i < 100;i++){
                str = str + (i +'\r\n');
            }
            textarea.value = str;
        }
    </script>

<div>
<textarea 
    style="width:40px;overflow:hidden;height:40px;" 
    readonly="true" 
    id="lines"
></textarea>
<textarea 
    style="width:500px;height:40px;" 
    id="some_text_area" 
    onclick="populate()"
    onscroll="sync();"
></textarea>
</div>

Функция Ofcourse populate() (а также объявление стиля и объявление события) должны быть более надежными и интеллектуальными, но только для демонстрации.

2 голосов
/ 15 декабря 2009

Еще один простой способ - создать узкое, но высокое фоновое изображение и немного отступов на текстовой области. Это незначительное предостережение: фиксированное количество строк и стиль шрифта, но это вариант с наименьшим количеством кода, необходимого.

2 голосов
/ 15 декабря 2009

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

1 голос
/ 15 декабря 2009

Без картинок это сложно.

Лучшая ставка: поместите вторую текстовую область с идентичными настройками (размер шрифта, высота строки, отступы ...), но с другим стилем (без цвета фона, без границ) слева от вашей исходной текстовой области. Сделайте его доступным только для чтения, вытащите его из поворота вкладок (tabindex=99999 может сделать трюк или просто отключите его ) и вставьте в него номера строк. Насколько я могу судить, это должно работать хорошо и правильно, оно должно даже пережить такие вещи, как клиент, изменяющий размер шрифта вручную в своем браузере.

Вы даже можете использовать position: relative и большое значение padding-left: в исходной текстовой области, чтобы переместить счетчик текстовой области в исходную.

Недостаток: счетчик строки не будет следовать за вертикальной прокруткой текстовой области. Смотрите комментарии ниже.

0 голосов
/ 15 декабря 2009

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

0 голосов
/ 15 декабря 2009

Вам нужно будет обернуть текстовую область и зафиксировать нажатия клавиш в поисках символов новой строки (например, ENTER). Делая быстрый поиск в Google, вы получаете http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506

...