`innerHTML` не работает с тегом` input`, но `value` делает - PullRequest
Новая
       12

`innerHTML` не работает с тегом` input`, но `value` делает

0 голосов
/ 22 сентября 2019

Я изучаю СРЕДНИЙ стек.Я выполняю операции CRUD.Я застрял с update.Не с операцией точно.Собственно перед обновлением ранее опубликованного article я хочу загрузить содержимое в текстовые поля для окончательных изменений.Это текстовые поля title и content.Где title - простое текстовое поле, а content - quill значение текстового редактора.Вот мой article.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;
      }
    );
  }

Все отлично работает, если я заменю innerHTML на value.Но я не могу этого сделать, потому что мое поле content имеет значение, подобное <h1>How to make Cheese cake</h1><br>..., потому что я использую текстовый редактор quill.Подскажите пожалуйста что не так с этим кодом.

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

Я провел еще несколько исследований по HTML-элементам.Вот мои наблюдения и решения.Вы не можете использовать innerHTML для тега input, потому что это самозакрывающийся тег, а innerHTML, как следует из названия, работает с тегами, которые имеют как открывающие, так и закрывающие теги. Например.div, 'span' и т. Д. Итак, innerHTML и value - это две разные вещи.

Решение

Вместо тега inputВы можете использовать div и добавить атрибут contentEditable="true", который сделает его редактируемым, например поле ввода: 

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

Это решит проблему.И в ts файле.Вы хорошо использовать: 

...
document.querySelector('#content-container').innerHTML=data.content;
...
0 голосов
/ 22 сентября 2019

Я думаю, что все, что вы ищете, это 

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