Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

314
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda