javascript - Angular 5 在 textarea 上突出显示额外内容 | 输入文本区域，在 div 中显示

问题描述

我想创建一个文本区域，在一定长度后显示突出显示的文本。所以我的逻辑是在 div 上创建一个 textarea，在 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 数据（显然是因为焦点）。

这里正在工作 plunker： https ://next.plnkr.co/edit/4Bgo9dewg7BThivt?open=lib%2Fapp.ts&deferRun=1

使用 contenteditable=true 也会产生问题。这是我拿的参考资料。 https://codepen.io/gtb104/pen/pztgH 它允许我输入但不能输入左右箭头键。

我该如何解决？请帮忙！！提前致谢。:)

标签： javascriptangulartypescriptangular5

javascript - Angular 5 在 textarea 上突出显示额外内容 | 输入文本区域，在 div 中显示 | 滚动问题

问题描述

解决方案

推荐阅读