CODEWITHSUNDEEP
javascriptcontenteditable
Nico Burns
Nico Burns

Reputation: 17099

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

Changing the text color of text in a contenteditable div is easy - simply called document.execCommand("foreColor",false,"#FFF") to change 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 perfectly, except that it will also remove any bold or italic styles, which is not what I want. Simply setting the color to black works, apart from if you have a link in the selection (which should stay the same color).

Is this possible?

Upvotes: 10

Views: 7798

Answers (2)

Richard Bauck
Richard Bauck

Reputation: 196

I'm having success with the following:

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

Seems (so far) that removeFormat can be understood to remove only formatting created by a particular command.

Upvotes: 17

undefined
undefined

Reputation: 6462

Here's 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 null/empty string does nothing, while passing 'inherit' results in setting the text color to "rgba(0, 0, 0, 0)" -- transparent black. Clearly this is a bug. I would love to see a more reliable cross-browser way to do this.

Upvotes: 8

Related Questions