Angular и перенос текста в textarea
Пишу приложение на angular, и появилась задача: когда пользователь вводит текст в textarea и нажимает enter, необходимо данную форму отправить, а если ctrl+enter, то сделать перенос.
Проблема в том, что мне необходимо, чтобы перенос работал как стандартный, т.е. чтобы сделать перенос в середине слова, нужно знать координаты курсора (или может это можно сделать как-то по другому?). Вот какой код у меня есть сейчас:
@HostListener('window:keydown', ['$event']) keyEvent(event: KeyboardEvent) {
if (event.key === "Enter" && (event.ctrlKey === true || event.metaKey === true) && event.shiftKey === false
&& event.altKey === false) {
let mes = this.chatForm.value.message + '\n';
console.log(event);
//console.log(document.caretRangeFromPoint(event.x, event.y));
this.chatForm.setValue({ message: mes });
} else if (event.key === "Enter" && event.ctrlKey === false && event.shiftKey === false && event.altKey === false) {
event.preventDefault();
if (this.chatForm.value.message !== '') {
this.onSubmit(this.chatForm.value);
}
}
}
Я бы мог определить положение курсора и вставить перенос, но у меня кликается клавиатура, а не мышь, поэтому у меня нет координат курсора.
Ответы (1 шт):
Автор решения: qwabra
→ Ссылка
сделать перенос в середине слова, нужно знать координаты курсора
там:
песочница
тут пример:
"use strict";
textarea.addEventListener('keydown', (e) => {
const { code, ctrlKey } = e;
if ('Enter' === code) {
e.preventDefault();
e.stopPropagation();
if (ctrlKey) {
console.log('ctrl enter');
foo(e.currentTarget);
}
else {
console.log('enter');
}
}
});
function foo(textarea) {
const { selectionStart, value } = textarea;
textarea.value = `${value.slice(0, selectionStart)}${'\n'}${value.slice(selectionStart, value.length)}`;
textarea.selectionStart = selectionStart + 1;
textarea.selectionEnd = selectionStart + 1;
}<textarea id="textarea"></textarea>