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

Question

Если вы читаете это, я надеюсь, у вас все хорошо!

У меня есть сырный, базовый c редактор кода , и я пытаюсь найти лучший подход для добавления пространства внизу текстовой области , чтобы пользователь не всегда печатал в самой нижней части текстовой области, например, когда что-то начинает переполняться / прокручиваться. Я думаю, что-то похожее на сам CodePen:)

Этот хитрый, потому что у меня есть два абсолютно позиционированных div, бок о бок (номера строк и строки, соответственно) и У меня синхронизирована прокрутка . Теперь добавьте к этому требование о добавлении некоторого пространства, и я застрял!

Вот подробный макет CodePen, в котором показан мой код незавершенного производства: CodePen: Textarea с Номера строк

$(document).ready(function() {
  $(".bulk-editor .editor").bind("input propertychange", function() {
    var lineCount = $(this).val().split("\n").length;
    $(".lines").text('');
    for (var i = 0; i < lineCount; ++i) {
      $(".lines").append("<span class='linenum'></span>");
    }
  });

  $('.editor').scroll(function() {
    var top = $(this).scrollTop();
    $('.lines').scrollTop(top);
  });

});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.container {
  height: 300px;
  padding: 16px 0;
}

.bulk-editor {
  position: relative;
  height: 100%;
  width: 100%;
  counter-reset: matches;
  outline: none;
  font-family: monospace;
  border: 1px solid #ced4da;
  overflow: hidden;
}

.bulk-editor-wrapper {
  position: relative;
  top: 0;
  padding-top: 4px;
  height: 100%;
  width: 100%;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  line-height: 1.2;
  font-size: 1rem;
  user-select: none;
  outline: none;
  border: none;
  z-index: 2;
  background: #e4e4e4;
  overflow: hidden;
  padding-top: inherit;
}

.linenum {
  display: block;
  width: 40px;
  text-align: right;
  color: #808080;
  line-height: inherit;
  font-size: inherit;
  &::before {
    counter-increment: matches;
    content: counter(matches);
  }
  padding-right: 10px;
}

.editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 60px !important;
  white-space: pre-wrap;
  outline: none;
  background-color: white;
  border: none;
  resize: none;
  margin: 0;
  color: grey;
  line-height: 1.2;
  font-size: 1rem;
  overflow: auto;
  padding-top: inherit;
  &:focus {
    color: black;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Refer to this article https://www.codeproject.com/Tips/5163219/HTML-Line-Numbering-using-textarea -->
<div class="container">
  <div class="bulk-editor">
    <div class="bulk-editor-wrapper">
      <div class="lines"></div>
      <textarea class="editor" rows="10" autocorrect="off" spellcheck="false"></textarea>
    </div>
  </div>
  </div>

Я изо всех сил пытаюсь определить правильный подход. Может ли это быть сделано с использованием pure CSS или является более сложным JavaScript решением с использованием событий прокрутки требуется?

Если кто-либо испытал подобное требование и знает здравый подход, я все уши. Большое спасибо!

Answer 1

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

function updateSize(){
    var code = document.getElementById("code"); //the textarea
    var codeHighlight = document.getElementById("codeHighlight"); //the highlighted code
    var longestLine = 0;
    for (var i = 0; i < code.value.split("\n").length; i++) {
        if(code.value.split("\n")[i].length > longestLine){
            longestLine = code.value.split("\n")[i].length;
        }
    }
    code.style.width = (longestLine+2) + "ch";
    code.style.height = 13.33333*1.15*(code.value.split("\n").length+1) + "px";

    codeHighlight.style.width = (longestLine+3) + "ch";
    if(longestLine == 0 && code.value.split("\n").length == 1){
        //make it visible if there is no text
        code.style.width = "100px";
        code.style.height = "100px";
    }
}
document.onkeyup = updateSize();

У меня есть текстовая область меньшего размера поверх div с выделенным синтаксисом. Сразу после того, как пользователь нажимает клавишу, код изменяет размер текстовой области, чтобы просто покрыть текст. Я нашел полезным также указать следующее CSS поверх других css:

#code{
    outline: none;
    overflow: hidden;
    resize: none;
}

Где #code - текстовая область.

У меня есть ссылка на то, что Я сделал здесь , а также здесь . Не весь код важен, но посмотрите на функцию updateHighlight () и div editMode.

Надеюсь, это было полезно!

Answer 2

Во-первых, вы можете добавить нижний отступ, который вы хотите, для .lines и .editor, т.е. 20px;

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  line-height: 1.2;
  font-size: 1rem;
  user-select: none;
  outline: none;
  border: none;
  z-index: 2;
  background: #e4e4e4;
  overflow: hidden;
  padding-top: inherit;
  padding-bottom: 20px;
}

.editor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 60px !important;
  white-space: pre-wrap;
  outline: none;
  background-color: white;
  border: none;
  resize: none;
  margin: 0;
  color: grey;
  line-height: 1.2;
  font-size: 1rem;
  overflow: auto;
  padding-top: inherit;
  padding-bottom: 20px;
  &:focus {
    color: black;
  }
}

Затем вы проверяете, находитесь ли вы в последней строке редактора. для прокрутки вниз.
Внутри функции для события input propertychange добавьте:

if (this.selectionStart === this.value.length) {
  $(this).scrollTop($(this).prop("scrollHeight"));
}