使 InputBox 中的部分文本在 Angular 7 中不可编辑

Posted 2023-03-05

【中文标题】使 InputBox 中的部分文本在 Angular 7 中不可编辑

【英文标题】：Make part of Text From InputBox not Editable in Angular 7

【发布时间】：2020-09-08 03:52:41

【问题描述】：

如何使文本的一部分不可编辑..

我的 .html 代码是

 <input type="text" placeholder="Enter Company Name" class="wc-form-control nobg" formControlName="subject" " id="subjectid">

我的 .ts 代码是在输入框附加类

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit"> ' + this.checboxvalue + ' </span>');
        this.editecompanydetail.patchValue(subject: this.editecompanydetail.value.subject + el.innerHTML )

但它正在附加标签，对此的任何解决方案......

【参考方案1】：

您可以尝试像这样添加contenteditable="false"：

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit" contenteditable="false"> ' + this.checboxvalue + ' </span>');
        this.editecompanydetail.patchValue(subject: this.editecompanydetail.value.subject + el.innerHTML )

你也可以试试readonly:

var el = document.createElement("span");
        el.innerHTML = ('<span class="nonEdit" readonly> ' + this.checboxvalue + ' </span>');
        this.editecompanydetail.patchValue(subject: this.editecompanydetail.value.subject + el.innerHTML )

希望对你有帮助:)

类似情况：

How can I make a span tag un-deletable? How do I make a text input non-editable?

更多主题：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

【参考方案2】：

尝试添加[disabled] = true 以使该字段不可编辑到您的输入标签。