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

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

    <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> 

Конечно populate () функция (а также объявление стиля и объявление события) должны быть более надежными и интеллектуальными, но это только для демонстрационных целей.

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

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

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

Без изображений, это непросто.

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

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

Даунсайд: счетчик строк выиграл ' t следовать вертикальной прокрутке текстового поля. См. Комментарии ниже.

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