Предотвращение поведения прокрутки текстовой области в Chrome после добавления новой строки

Question

В последнее время моя версия chrome все чаще и чаще делает что-то странное (74.0.3729.131 в Ubuntu 18.04). У меня есть небольшой редактор сценарий, который имеет текстовую область, которая отображает код. Текстовая область имеет фиксированный размер и вертикальную полосу прокрутки. Помимо этого ничего особенного.

Обычно, когда я вставляю новую строку (нормальное поведение textarea), полоса прокрутки не двигается. Теперь по какой-то причине примерно в 80% случаев она прокручивает текстовую область вниз, пока положение каретки не окажется на вершине текстовой области. Как ни странно, если я удаляю и вводю новую строку в той же позиции, она обычно не прокручивается.

Я не уверен, что это какая-то новая проблема в Chrome. У меня нет этой проблемы с предыдущими версиями с идентичным редактором.

Вот кодовая ручка, которая демонстрирует проблему, прокрутите до некоторой строки, нажмите enter, и текстовая область должна прокрутиться вниз. Попробуйте сделать это несколько раз, чтобы увидеть непредсказуемое поведение (добавление кода просто для возможности добавления ссылки, поскольку вы можете видеть, что это просто текстовая область).

https://codepen.io/anon/pen/rgKqMb

<textarea style="width:90%;height:300px"></textarea>

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

Answer 1

Вы можете попытаться избежать событий в текстовой области с помощью css и js, а затем перевести прокрутку в ее текущую позицию:

CSS:

textarea { 
    overflow:auto; 
    resize:none; 
    width:90%; 
    height:300px; 
} 

ЯШИ: Вам нужно будет вставить первый ответ из этого вопроса в A

function preventMoving(e) {
    var key = (e.keyCode ? e.keyCode : e.which);
    if(key == 13) {
        e.preventDefault();
        // A
    }
}

Тогда в вашем HTML:

<textarea onkeyup="preventMoving(event);"></textarea>