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

Question

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

我的 .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 })

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

Answer 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

Answer 2

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