Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

315
Visualizações
document.execCommand('removeFormat') failing on Chrome when trying to remove format set by document.execCommand('hiliteColor')

I'm adding a background to some selected text in a contenteditable element via document.execCommand('hiliteColor', false, '#d4ecff');.

If the selected text contains some formatting tags (<b></b> for instance), calling document.execCommand('removeFormat') on the selection does not remove all the formats. It's like the background colour is passed to the text formerly encompassed into <b></b>.

I'm facing the issue on Chrome (version 100.0.4896.75 - 64 bits) as well as Brave (version 1.37.111 Chromium: 100.0.4896.79 - 64 bits). Everything seems to work as expected on Firefox.

Here's a demo and steps to reproduce: https://jsfiddle.net/L82ogcf5/

PS: I know that the use of document.execCommand() is no longer recommendended, so please do not point that out. It's irrelevant until the feature is really deprecated (we all know that is not going to happen anytime soon).

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You're adding a hiliteColor! But then you want to Remove any format.
First the <b> tag will be removed, and only after a second click the hiliteColor will be removed.

What you want instead is:

// Remove hiliteColor, not other text formatting
btn2.onclick = () => document.execCommand("hiliteColor", false, "transparent");

Example:

const btn1 = document.querySelector("#btn1");
btn1.onclick = () => document.execCommand("hiliteColor", false, "red");

const btn2 = document.querySelector("#btn2");
btn1.onclick = () => document.execCommand("hiliteColor", false, "transparent");
#input {
  margin-top: 1rem;
  border: 1px solid;
}
Steps to reproduce:
<ol>
  <li>Select all the text inside #input</li>
  <li>Click on the button 1 - "add background colour"</li>
  <li>Click on the button 2 - "remove format</li>
  <li>Do you see a red background where the bold text was? Here's my bug</li>
</ol>
<button id="btn1">add background colour</button>
<button id="btn2">remove format</button>
<div id="input" contenteditable="true">
  I am a real
  <strong>nice test</strong> string
</div>

PS: this technology is sadly about to go dead (OK, maybe not so soon because the so many applications that at this date are driven on contenteditable and the execCommand). Just because, introduced by IE, and with the rise of competitor browsers they all disagreed on the specs and it slowly became an unhandleable beast... with no replacement currently in active development or written specs, AFAIK.

about 4 years ago · Juan Pablo Isaza Relatório

0

first of all, .execCommand is decapitated, second, in chromium, the removeFormat function works in layers. It removed the background color because it was the first layer of formatting. It only removed the bold on the bold text because it was the first layer of formatting there. Try repeating the command 4 times for highlight, bold, italics, and underline. I presume that you are trying to create a text box with adjustable formatting?

Just for this example, a solution would be instead of clearformatting, do undo as your command.

Or, you could do execCommand again, set the highlight color to white or transparent or something.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda