Hay un elemento pre que es editable. Quería agregar un carácter de tabulación a través del botón TAB. Entonces, agregué el método js llamado putTab . Este método funciona bien. Pero hay un problema con el cursor de texto. Mientras escribe normalmente, la vista se desplaza constantemente hacia la derecha. Pero al presionar la tecla de tabulación, la vista no continúa deslizándose hacia la derecha después del final de la línea. Luego, por ejemplo, cuando presiono la tecla 'A', de repente obtengo la vista esperada deslizándome hacia la derecha.
No pude encontrar ninguna información clara sobre cómo seguir el cursor de texto después de agregar un carácter en el método JS:
function putTab() { var pre = document.getElementById("typearea"); var doc = pre.ownerDocument.defaultView; var sel = doc.getSelection(); var range = sel.getRangeAt(0); var tabNode = document.createTextNode(" "); range.insertNode(tabNode); range.setStartAfter(tabNode); range.setEndAfter(tabNode); sel.removeAllRanges(); sel.addRange(range); } document .querySelector('button') .addEventListener('click', putTab); #typearea { overflow-x: hidden; margin: 8px; max-height: auto; white-space: pre; display: block; width: auto; line-height: 1.5; } <button>Insert Tab</button> <pre id="typearea" contenteditable> Some predefined text. </pre>Espero haber explicado el problema claramente, gracias.
Dado que el OP proporciona un estilo que hace que el contenido editable se desplace al menos horizontalmente, el contenido, al agregarle caracteres adicionales, debe desplazarse nuevamente a la vista principal.
Por lo tanto, el OP podría usar el método scrollTo del contenedor de contenido editable. Pero, nuevamente, el OP tuvo que averiguar cuándo (agregar contenido) y cuándo no (por ejemplo, anteponer o insertar contenido mientras el cursor aún está perfectamente alineado) para aplicar este método.
Pero usar el método scrollBy del contenedor cubre cualquier escenario.
function putTab() { var pre = document.getElementById("typearea"); var doc = pre.ownerDocument.defaultView; var sel = doc.getSelection(); var range = sel.getRangeAt(0); const scrollWidthBefore = pre.scrollWidth; var tabNode = document.createTextNode(" "); range.insertNode(tabNode); range.setStartAfter(tabNode); range.setEndAfter(tabNode); sel.removeAllRanges(); sel.addRange(range); pre.scrollBy(pre.scrollWidth - scrollWidthBefore, pre.scrollHeight); // // perfect approach for appending content // // but leads to out of view scrolling in // // all other cases of perfectly visible // // content like prepending content or // // inserting it. // // pre.scrollTo( // pre.scrollWidth - parseFloat(window.getComputedStyle(pre).getPropertyValue('width')), // pre.scrollHeight, // ); } document .querySelector('button') .addEventListener('click', putTab); #typearea { overflow-x: hidden; margin: 8px; max-height: auto; white-space: pre; display: block; width: auto; line-height: 1.5; } <button>Insert Tab</button> <pre id="typearea" contenteditable>Some predefined content.</pre>