У меня есть текстовое поле, к которому я добавил прослушиватель onChange, чтобы обновлять высоту поля всякий раз, когда требуется новая строка (или если строка больше не требуется). У меня проблема в том, что, когда курсор приближается к концу (текущей) последней строки текстовой области, создается дополнительный пробел, который на самом деле не «существует» (т. Е. Он не состоит из символов - своего рода «пустой»). линия ").
Моего описания, вероятно, недостаточно, чтобы объяснить возникшую у меня проблему, но тот же эффект можно наблюдать в JSFiddle ниже (я использую идентичную реализацию для моей собственной формы):
https://jsfiddle.net/d9fqaest/
Как видите, когда достигнут конец первой строки, новая строка добавляется без проблем:
Но когда достигается конец второй строки (или любых последующих строк), новая «пустая» строка добавляется слишком рано (для любых следующих строк требуется меньше и меньше символов перед добавлением ошибочной строки):
Я подозреваю, что проблема лежит где-то в способе подсчета количества строк:
handleChange(e) {
const oldRows = e.target.rows;
e.target.rows = 1;
const newRows = ~~(e.target.scrollHeight/lineHeight);
if (newRows === oldRows) {
e.target.rows = newRows;
}
this.setState({
value: e.target.value,
rows: newRows
});
}
Я пробовал несколько различных потоков логики здесь, в том числе просто устанавливая height элемента в scrollHeight, но я не смог произвести желаемое поведение (вышеупомянутый подход несколько работал, но я не смог понять, как удалить строки, так как текст был удален). Мне известно о нескольких внешних библиотеках, которые могли бы решить эту проблему, но я бы хотел по возможности избегать их использования.
Спасибо!