有沒有辦法使跨度不可編輯？

Question

我正在使用內容可編輯的div作為用於實時協作目的的編輯器。 我需要在客戶端為每個用戶繪制插入符號/光標。 我這樣做是通過在每個事件（例如按鍵和單擊）上添加和刪除跨度來實現的。

<span id="caret1" style="fontSize:18px color:red">|</span> 

如何使該跨度不可編輯？ 因此，當用戶將其插入符號保持在恆定位置而另一個用戶在此相同位置編輯某些內容時，他無法通過退格鍵刪除該插入符號或選擇並像編輯文本一樣對其進行編輯。

編輯：

<span id="caret1" style="fontSize:18px color:red" contenteditable=false>|</span> 

至少不允許用戶在跨度中寫入，但用戶仍然可以按退格鍵刪除該跨度。

Answer 1

幾件事

1）您的源代碼格式不正確。 雙引號過多。

"fontSize:18px" color:red"

2）另一件事是，我還沒有看到contentEditable是一種真正的樣式，我在行動中看到的更像是偽類（在CSS文件中被引用）或html標簽的屬性，而不是樣式本身。

<span id="caret1" contentEditable="true" style="">

3）如果上述兩種方法都不起作用，則可以嘗試使用javascript / jquery方法，將其中的光標刪除或退格到兩個光標彼此重疊的位置。 您可以將兩個ID添加到同一跨度。

`<span id="caret1 caret2" style="fontSize:18px" contenteditable:"false" color:"red">|</span> `

當caret2做一些不同的事情時，移出caret1，然后為caret2創建一個新的...

為此，您可以使用一些腳本（也可以使用rangyInputs之類的東西 ），並確定所選文本中是否包含另一個插入符號...，還可以使用其中的一部分.on（'keypress'）進行驗證在刪除/退格上...