typescript `innerHTML`不与`input`标签一起工作,但`value `可以

f0brbegy  于 2023-06-24  发布在  TypeScript
关注(0)|答案(3)|浏览(121)

我正在学习平均值堆栈。我正在执行CRUD操作。我被update卡住了。不完全是行动。实际上,在更新以前发布的article之前,我想加载文本字段中的内容以进行最终更改。这些文本字段是titlecontent。其中title是一个简单的文本字段,contentquill文本编辑器值。这里是我的articles.component.html

Title:<br>
<input type="text" id="title-container" name="title" >
<br>
Content:<br>
<input type="text" id="content-container" name="content">
<br><br>
<input type="submit" value="Submit">

这是我的article.component.ts当我单击edit按钮时,从其他地方调用此方法。

onPress2(id) {
    this._articleService.fetchArticle(id)
    .subscribe (
      data => {
        document.querySelector('#title-container').innerHTML=data.title;
        document.querySelector('#content-container').innerHTML=data.content;
      }
    );
  }

如果我用value替换innerHTML,一切都可以完美地工作。但是我不能这样做,因为我的content字段的值类似于<h1>How to make Cheese cake</h1><br>...,因为我使用的是quill文本编辑器。请告诉我这个代码有什么问题。

n1bvdmb6

n1bvdmb61#

我觉得你想要的只是

document.querySelector('#title-container').value=data.title;
document.querySelector('#content-container').value=data.content;
lx0bsm1f

lx0bsm1f2#

我对html元素做了更多的研究。以下是我的观察和解决方案。你不能在input标签上使用innerHTML,因为它是一个自关闭的标签,而innerHTML顾名思义,它与同时具有开始和结束标签的标签一起工作。div、'span'等。innerHTMLvalue是两个不同的东西。

解决方案

代替input标签,你可以使用div并添加一个属性contentEditable="true",这将使它像输入字段一样可编辑:

<div contentEditable="true" id="content-container" value="">
</div>

这将解决问题。在ts文件中。你很好用途:

...
document.querySelector('#content-container').innerHTML=data.content;
...
bogh5gae

bogh5gae3#

innerHTML属性用于访问或修改元素中的HTML内容。但是,input元素是HTML中的void元素,这意味着它不能有任何HTML内容或子元素。Void元素,如input、img或br,没有结束标记,也不能包含其他元素。因此,尝试访问或修改输入元素的innerHTML将无法正常工作,因为它没有任何HTML内容。

相关问题