Contenteditable 自动将 CSS 应用于输入的文本答案

【问题标题】：Contenteditable automatically applying CSS to entered textContenteditable 自动将 CSS 应用于输入的文本
【发布时间】：2012-04-04 02:42:56
【问题描述】：

有没有办法禁用 CSS （如 text-transform）对使用 contentedtiable 输入的文本的影响？

在我的页面上，“证书程序”显示为 text-transform 设置为大写。输入的实际数据是：Certificate Program。

当我通过 contenteditable 在字段中输入时，添加的任何文本都会自动变为大写。

将 contenteditable CSS 设置为 text-transform:none;不起作用，因为显示文本是：Certificate Program and I want "CERTIFICATE PROGRAM"

我可以将我的 CSS 设置用于显示目的，但不影响新输入的文本吗？

现在发生了什么：文本：证书程序，HTML：

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

我想要什么：文本：证书程序，HTML：

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

【问题讨论】：

【解决方案1】：

您可以看到here，原始文本值不受text-transform 的影响，因为它只会改变您查看文本的方式（编辑文本然后单击某处）。

我不知道你想要什么，问题不是很清楚，但是..

如果您想删除该部分的大写文本，只需将其覆盖：

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

如果您想在编辑时去掉大写文本：

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

【讨论】：

【解决方案2】：

只需覆盖之前的 css 规则，例如

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

【讨论】：