ContentEditable 內容的奇怪行為

Question

我有一個奇怪的問題，我一生都無法理解，希望有人以前遇到過這個問題或者可能有解決方案。

我的 Angular 應用程序正在使用contenteditable <div>輸入內容，該內容按預期工作，但有一個例外。 如果用戶鍵入數字后跟a或o ，則前面的字母會加上上標，例如：

1a 顯示為 1ª / 2o 顯示為 2º

我已經在 Chrome / Safari / Firefox 和 Opera 中對此進行了測試，並且所有這些都是一致的。

也沒有其他字符或 HTML 存儲在數據庫表中，並且在查看源代碼時，1a 如預期的那樣是 output。 這只發生在數字和a或o作為下一個字符的情況下，所有后續字符都符合預期。

后續和添加的信息保存內容的數據庫是一個 MySQL 數據庫，采用UTF-8-MB4編碼，這會導致這里出現問題。 然而，在查看表中的數據時，它按預期存儲。

Answer 1

Certainly, you seem to have a CSS class or inline style with ordinal numbers turned on, adding the following css to your contenteditable styles should fix it:

[contenteditable], [contenteditable] * {
    font-variant-numeric: normal!important;
}

請檢查以下工作示例。 css .ordinal和@font-face是我對您的問題的猜測。 我添加了 class removed-ordinal作為如何實現font-variant-numeric: normal的示例。

 @font-face { font-family: 'Source Sans Pro'; src: url("https://mdn.github.io/css-examples/font-features/SourceSansPro-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; }.ordinal { font-variant-numeric: ordinal; font-family: "Source Sans Pro"; }.removed-ordinal /*,[contenteditable] *, [contenteditable] */ { font-variant-numeric: normal; }

 <div class="body-parent-which-inherits-ordinal-to-childrens ordinal"> <div contenteditable>1a, 2o</div> <div contenteditable class="removed-ordinal">1a, 2o</div> </div>

正如您在我的示例中看到的，當您向第一個div寫入附加文本時，所有非大寫字符都將寫入序號文本。 原因是我正在使用的字體已經生成了這樣做。 我建議您閱讀有關OpenType的內容， 為了使序數起作用，應在 OpenType ordn中使用特定的字形。

解決問題的更多方法：

1. 刪除 css 中的所有@font-face 。
2. 將您的font-family更改為沒有序數的字體系列（例如font-family: serif; ）