Переопределение вставки редактируемого содержания абзаца предотвращает автоматическую прокрутку - PullRequest
Новая
       7

Переопределение вставки редактируемого содержания абзаца предотвращает автоматическую прокрутку

0 голосов
/ 17 октября 2018

Я использую angular.

У меня есть пользовательский компонент ввода, который состоит из элемента <p> с contenteditable="true", и я слушаю вставку для этого <p> (так что я могу сказать,когда пользователь вставляет, и я могу преобразовать содержимое в обычный текст): 

onPaste(event: ClipboardEvent) {
    // Prevent the normal paste functionality.
    event.preventDefault();

    // Get the text being pasted and convert it to plain text.
    const plainText = event.clipboardData.getData('text/plain');

    const selection = window.getSelection();
    const range = selection.getRangeAt(0);

    // Remove the html-formatted content.
    range.deleteContents();

    // Re-add the content as plain text.
    const textNode = new Text(plainText);
    range.insertNode(textNode);

    // Move the cursor to the end of the pasted text.
    selection.collapse(textNode, textNode.length);
}

Это прекрасно работает для предотвращения вставки содержимого, отформатированного в формате html, в поле ввода.

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

Как я могу заставить его показать курсор после пользовательской вставки

...