Geek Answers Handbook

Contenteditable reset text color after foreColor has been used without resetting other styles

Changing the text color of the text in the contenteditable div is simple - just call document.execCommand("foreColor",false,"#FFF") to change the text color to white.

However, I cannot find a way to reset this color back to its default value (or to the value of the parent element). document.execCommand("removeFormat",false,null) works fine, except that it also removes any bold or italic styles that I don't want. Just setting the color for black works, in addition, if you have a link in the selection (which should remain the same color).

Is it possible?

+6
javascript contenteditable
source share
2 answers

I have success with the following:

 document.execCommand("removeFormat", false, "foreColor");

It seems that removeFormat can be understood to remove only the formatting created by a specific command.

+14
source share

Here is a partial answer, but I'm still looking for a solution for Chrome:

In IE9, you can use the following:

 document.execCommand("foreColor",false,"")

In Firefox, you can use this:

 document.execCommand("foreColor",false,"inherit")

But in Chrome, passing an empty / empty string does nothing, and passing "inherit" causes the text color to match "rgba (0, 0, 0, 0)" - transparent black. Clearly, this is a mistake. I would like to see a more reliable way to cross-browser.

+6
source share

More articles:


All Articles