CODEWITHSUNDEEP
jquerycsshtml
jsuissa
jsuissa

Reputation: 1762

Contenteditable automatically applying CSS to entered text

Is there a way to disable the affect of CSS like text-transform on text entered using contentedtiable?

On my page "CERTIFICATE PROGRAM" is displayed as text-transform is set to uppercase. The actual data entered was: Certificate Program.

When I type in the field via contenteditable any text added is automatically uppercase.

Setting contenteditable CSS to text-transform:none; doesn't work because then the display text is: Certificate Program and I want "CERTIFICATE PROGRAM"

Can I use my CSS settings for display purposes, but not affect newly entered text?

What's happening now: TEXT: CERTIFICATE PROGRAMS, HTML: 

<section id="name+degree+96" contenteditable="true">Certificate PrograMS</section>

What I want: TEXT: CERTIFICATE PROGRAMS, HTML: 

<section id="name+degree+96" contenteditable="true">Certificate Programs</section>

Upvotes: 0

Views: 659

Answers (2)

Alessandro Vendruscolo
Alessandro Vendruscolo

Reputation: 14877

As you can see here, the original text value isn't affected by text-transform, because it changes only the way you see text (edit the text and then click somewhere).

I don't know what you want, the question isn't that clear, but..

If you want to get rid of the uppercase text on that section just override it with:

section[contenteditable] {
   text-transform: none;
}

If you want to get rid of the uppercase text while editing it:

section[contenteditable]:focus {
   text-transform: none;
}

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

just override the previous css rule, e.g. 

section[contenteditable] {
   text-transform: none;
}

Upvotes: 1

Related Questions