Pesquisa de site

javascript - Como posso mudar div contenteditable="false" para "true"?

Estou brincando com o Angular2. Quero mudar o valor de uma div - Preciso alterar todos os contenteditable="false" para contenteditable="true" que estão na minha página HTML.

Por favor, note que às vezes o contenteditable="false" será adicionado a uma tag DIV e às vezes a uma tag P, h1 ou outra.

O HTML fica da seguinte forma:

<button (click)="selectDiv()">select div</button>
<section>
      <div class="content">
        <h1 contenteditable="false" >Resize your browser and see how they adapt.</h1>
        <h1 contenteditable="false" >text2.</h1>
      </div>
      <div class="content" contenteditable="false">
        <p>Content 2.</p>
        <h1>text2.</h1>
      </div>
</section>

Por favor, me guie sobre o que devo escrever em explore.ts para que, quando eu clicar no botão, selectDiv() seja chamado e a função seja executada e todo o contenteditable="false" se torne "true"

Por favor, note que pode haver qualquer número de contenteditable="false" no meu código.

selectDiv(){
//what should i write here
}

Resposta #1

Para uma forma Angular de fazer isso:

HTML

<button (click)="selectDiv()">select div</button>
<section>
  <div class="content">
    <h1 [contentEditable]="contentEditable">Resize your browser and see how they adapt.</h1>
    <h1 [contentEditable]="contentEditable">text2.</h1>
  </div>

  <div class="content" [contentEditable]="contentEditable">
    <p>Content 2.</p>
    <h1>text2.</h1>
  </div>
</section>

Controlador TypeScript

...
private contentEditable: boolean = false;
...
selectDiv(): void {
    this.contentEditable = true;
}
...

Resposta #2

Você pode consultar o atributo e usar a propriedade attr para atualizar seu valor.

Aqui todos os h1 serão selecionados que possuem o atributo contenteditable

function selectDiv() {
  $("h1[contenteditable='false']").attr('contenteditable', true)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="selectDiv()">
  select div</button>
<section>

  <div class="content">
    <h1 contenteditable="false">Resize your browser and see how they adapt.</h1>
    <h1 contenteditable="false">text2.</h1>
  </div>

  <div class="content" contenteditable="false">
    <p>Content 2.</p>
    <h1>text2.</h1>
  </div>

</section>

Artigos relacionados