Проблема с заменой новой строки на новую строку с пробелом, как решить?

Question

[Дима]

Есть вот такой небольшой скрипт, по замене ввода новой строки, на новую строку с пробелом, сделанный с помощью vue

new Vue ({
	el: '#app',
	data: {
		input: '',
	},
		methods: {
		onInput() {
			this.input = this.input.split('\n').join('⠀\n');
		}
	}
});

Но при работе, textarea ведет себя неадекватно, создает много лишних пробелов и в процессе печати и переноса строк, создает новые строки. Вот видео


Как лучше реализовать эту функцию? Сделать замену при нажатии кнопки Enter?

Заранее спасибо.

Answer 1

[0xD34F]

Сделать замену при нажатии кнопки Enter?

Как вариант.

Comments

[Дима]

Спасибо! А в чем была проблема, можете сказать? Заменялись уже созданные пустые строки?

[0xD34F]

Дима Волков, да. Пустая строка есть, пробел есть. Вы заменяете пустую строку на пустую строку с пробелом - получается пустая строка и два пробела. Ещё раз делаете замену - три пробела. И т.д. Причём делалось это у вас при каждом редактировании текста, а не только при переносе строки. То есть, нажали "a" - к каждому переносу строки добавилось по пробелу, нажали "b" - ещё по пробелу, и т.д.

[Interface]

Дима Волков, 0xD34F, я думаю стоит упомянуть, что явно сохраняется позиция курсора.

var pos = e.target.selectionEnd
...
this.$nextTick(() => e.target.selectionEnd = pos + 2)

[0xD34F]

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

Answer 2

[Interface]

https://codepen.io/Int0h/pen/QrLroj
так например (13 строка в js)

Comments

[Дима]

Спасибо! Проблема осталась https://youtu.be/JUJ9tGdlcsw