Angular 5 Выделите дополнительный контент на textarea |Введите текстовое поле, покажите его в div |Вопрос прокрутки - PullRequest
0 голосов
/ 21 сентября 2018

Я хочу создать текстовую область, которая показывает выделенный текст после длины.Поэтому моя логика заключается в создании текстовой области в 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 Позволяет набирать, но не нажимать клавиши со стрелками вправо.

Как я могу решить эту проблему?Пожалуйста помоги!!Заранее спасибо.:)

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете использовать ngStyle в текстовой области

<textarea [(ngModel)]="actual" class="form-control" [ngStyle]="{'color': (actual.length > 10) ? 'red' : 'greeen' }" spellcheck="false"></textarea>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...