将emoji表情与textarea Angular +2结合使用

时间:2018-06-27 08:40:10

标签: angular data-binding textarea

我收到此错误

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename

我正在尝试使用angular2-emoji-picker在文本区域中显示带有文字的表情符号,这是html代码:

 <textarea class="form-control post-text-input emoji-content-editable" id="post_box" contentEditable="true"
     (emojiPickerCaretEmitter)="handleCurrentCaret($event)"
     (keyup)=" checkText(post.postText)"
     [(ngModel)]="post.postText">
 </textarea>

<div class="emoji-card">
                                    <i
                                            class="emoji-toggle-button pe-7s-smile"
                                            (click)="toggled = !toggled"
                                            [(emojiPickerIf)]="toggled"
                                            [emojiPickerPreserveSelection]="false"
                                            [emojiPickerDirection]="direction"
                                            [emojiPickerAutofocus]="true"
                                            (emojiPickerSelect)="handleSelection($event)"></i>
                                </div>

这是我的ts:

handleSelection(event: EmojiEvent) {

        this.post.postText = this.post.postText.slice(0, this._lastCaretEvent.caretOffset) + event.char + this.post.postText.slice(this._lastCaretEvent.caretOffset);
        this.eventMock = JSON.stringify(event);
    }

    handleCurrentCaret(event: CaretEvent) {
        this._lastCaretEvent = event;
        this.eventPosMock = `{ caretOffset : ${event.caretOffset}, caretRange: Range{...}, textContent: ${event.textContent} }`;
    }

问题出在this.post.postText=this.post.postText.slice(0,this._lastCaretEvent.caretOffset) + event.char + this.post.postText.slice(this._lastCaretEvent.caretOffset);语句中,因为当我删除它并将其替换为控制台日志时,一切都很好

0 个答案:

没有答案