Как я могу добавить номера строк в текстовую область, используя упорядоченный список?

ProgramBox

Как я могу добавить номера строк в текстовую область, используя упорядоченный список?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #textarea #html-lists

Вопрос:

У меня есть текстовая область, и я хочу, чтобы номера строк, сделанные из упорядоченного списка, находились слева от нее и соответствовали прокрутке и CSS текстовой области.

Вот HTML — код:

 #objtext{
  position:absolute;
  top:0;
  left:0;
  width:30%;
  height:70%;
  background-color:#eeeeee44;
}

#linenumbersdiv{
  color:brown;
  font-family: "Lucida Grande",Verdana;
  position: absolute;
  top:0;
  left:0;
  width:40px;
  height:70%;
  background-color:lime;
  margin-left:-10px;
  padding:0px;
  overflow-y:scroll;
  margin-top:0;
  margin-bottom:0;
  padding-left:0;
  
}


#linenumberslist{
  font-size:10px;
  display:block;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
}

 <div id="linenumbersdiv">
      <ol id="linenumberslist">
        <li id="theone">this could be individually colored!</li>
        <li>ahh</li>
        <li>AHHHH</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <textarea id="objtext"></textarea>

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

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

Эта ссылка мне не помогает, когда я смотрю на CSS текстовой области и упорядоченного списка, а затем пытаюсь сделать их одинаковыми оттуда, это не работает. https://www.w3schools.com/cssref/css_default_values.asp

Вопрос: Есть ли способ воспроизвести CSS текстовой области в упорядоченный список таким образом, чтобы строки выстраивались в линию?

1. Вы не можете сопоставить положение прокрутки между ними, используя только CSS, для этого потребуется JavaScript.

2. @CBroe Да, я знаю это, я разберусь с этим, как только разберусь с CSS.

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

4. Вы не можете поместить ol в текстовую область, но вы можете сделать список в отдельном div и разместить его над текстовой областью. Помните, что в соответствии с w3schools «Тег <textarea> определяет многострочный элемент управления вводом текста». Таким образом, внутри у вас может быть только текст.

5. @Azu Да, я поместил упорядоченный список в отдельный раздел, а не в текстовую область. Он находится в div с идентификатором «linenumbersdiv». Он также уже расположен над текстовой областью, хотя я могу переместить текстовую область вправо от того места, где она находится в данный момент, чтобы она автоматически не перекрывалась с div упорядоченного списка, если бы я поставил пробелы на скриншоте примера.

Ответ №1:

Важно установить значение margin и padding для обоих textarea и ol для 0. Поскольку свойства шрифта не наследуются textarea , вам необходимо установить для них значение 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;
        
    }

 <div class="container">
    <div class="list">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="textarea">
        <textarea></textarea>
    </div>
</div>

1. Я не могу отрицать, что это работает, но, по крайней мере, какое-то объяснение в ответе было бы неплохо…

2. Мой пост дополнен надлежащим объяснением.

3. Так вот что я сделал не так. Спасибо вам за объяснение.

4. Решение там удаляет шрифт, который делает ширину каждого символа одинаковой. Я отредактировал код и увидел, что его возвращение возвращает проблему. Есть ли шрифт, который может имитировать или возвращать эффект?

5. Я поставил этот шрифт просто для того, чтобы он был одинаковым для всех образцов. Нет необходимости копировать его.

Метки: используя упорядоченный список?, Как я могу добавить номера строк в текстовую область