Я хочу создать текстовую область, которая показывает выделенный текст после длины.Поэтому моя логика заключается в создании текстовой области в div, пользовательских типов в textarea и визуализации данных в div.
Here is my HTML:
<div class="form-control" #dummytext ></div>
<textarea [(ngModel)]="actual" class="form-control" (input)="onInput($event, dummytext)"
spellcheck="false"></textarea>
<div class="characters">{{ actual.length}} of {{maxlength}}</div>
Here is my js :
this.maxlength = '10';
actual = '';
onInput = (e, dummytext) => {
const value = e.target.value;
if (value.length > this.maxlength) {
const extra = value.substr(this.maxlength);
const a = value.substr(0, this.maxlength) + '<span style="color: red;">' + extra + '</span>';
dummytext.innerHTML = a.replace(/\n/g, '<br />');
} else {
dummytext.innerHTML = value.replace(/\n/g, '<br />');
}
dummytext.scrollTop = e.target.scrollTop;
}
And my CSS:
.form-control {
font-size: 14px;
padding: 10px;
height: 100%;
max-height: 100%;
overflow-y: auto;
}
textarea {
position: absolute;
width: 91.9%;
top: 50px;
-webkit-text-fill-color: transparent;
background: transparent;
color: inherit;
text-shadow: 0 0 0 transparent;
resize: none;
overflow: hidden !important;
height: 71% !important;
}
.characters {
font-size: 12px;
color: $col-active-gray;
margin-top: 5px;
}
Используя CSS, я изменил цвет курсора и прозрачный фактический цвет.
Я выполнил большинство вещей.Проблема, с которой я сталкиваюсь, заключается в том, что после того, как моя прокрутка появляется из div и нажимает клавишу вверх, она на самом деле приводит меня к данным textarea (очевидно, из-за фокуса).
Вот рабочий плункер: https://next.plnkr.co/edit/4Bgo9dewg7BThivt?open=lib%2Fapp.ts&deferRun=1
Использование contenteditable = true также создает проблему.Вот ссылка, которую я взял.https://codepen.io/gtb104/pen/pztgH Позволяет набирать, но не нажимать клавиши со стрелками вправо.
Как я могу решить эту проблему?Пожалуйста помоги!!Заранее спасибо.:)