[英]Setting the caret position to an empty node inside a contentEditable element
我的任務是將文本插入符號設置為出現在contentEditable div 內的空跨度節點內。
以下內容在 Firefox 3.6 上沒有問題：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery-1.4.3.min.js"> </script> <style> #multiple { border: 1px solid #ccc; width: 800px; min-height: 20px; padding: 5px; outline: none; } </style> <script> $(document).ready(function(){ var contentEditable = document.getElementById('multiple'); var lastItem = contentEditable.getElementsByTagName('span').item(2); var selectElementText = function(el, win){ win = win || window; var doc = win.document, sel, range; if (win.getSelection && doc.createRange) { range = doc.createRange(); range.selectNodeContents(el); range.collapse(false); sel = win.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (doc.body.createTextRange) { range = doc.body.createTextRange(); range.moveToElementText(el); range.select(); } } contentEditable.focus(); selectElementText(lastItem); }); </script> <title>Range Selection Tasks (Make Me Want to Cry)</title> </head> <body> <div id="multiple" contentEditable="true"> <span style="color:red">First</span><span style="color:green">Second</span><span style="color:blue"></span> </div> </body> </html>
...但在 Webkit 和 IE 上，焦點設置為倒數第二個跨度。 不知道為什么。 如果我在最后一個跨度內放置一個空格，它會起作用，但隨后我會得到一個字符范圍選擇。
話雖如此，如果插入符號在最開始，則在最后一個節點中有空格是可以接受的。
對此的任何幫助將不勝感激。 提前謝謝你。
將元素的innerHTML設置為零寬度字符：
('element').innerHTML = 'ÈB';
現在carret可以去那里了。
IE 的選擇/范圍模型基於文本內容的索引，不考慮元素邊界。 我相信在沒有文本的內聯元素中設置輸入焦點可能是不可能的。 當然，對於您的示例，我無法通過單擊或箭頭鍵在最后一個元素內設置焦點。
如果您將每個跨度設置為display: block ，它幾乎可以工作，盡管仍然存在一些非常奇怪的行為，這取決於父項中空格的存在。 使用浮動、內聯塊和絕對位置等技巧使顯示看起來內聯，使 IE 將每個元素視為一個單獨的編輯框。 彼此相鄰的相對定位塊元素可以工作，但這可能不切實際。
如果它讓您感覺更好，IE9 終於修復了這個不愉快，並采用了標准范圍模型。 （萬歲！）
如果插入符號在最開始，則在最后一個節點中有空格是可以接受的。
除非 IE 選擇專家能想到更好的方法，否則我可能會這樣做。 （打電話給蒂姆！）
我找到了 Webkit 的解決方法，不知道之前是否有人發現過這個方法，但您可以在要添加的元素的后偽選擇器中使用 css3 內容屬性執行相同的操作，而不是以編程方式附加零寬度空間將插入符號放入。這樣做的好處是額外的字符不會出現在 DOM 中，並且用戶無法在它之間導航插入符號。 所以基本上不需要清理。
為了使其適用於您的內容可編輯元素的任何子元素，它應該是這樣的：
#mycontenteditableelement *:after {
content: '\200B';
}
我沒有完全檢查，但我懷疑這是一個完整的解決方法。
對我來說，將 contenteditable div 的內容設置為<br>有效。 我嘗試將其設置為nbsp; 但這會在我開始編輯之前在 div 中創建額外的字符空間。
希望這會有所幫助。
聚會有點晚了，但我使用了 Unicode 零寬度無空間 (  ) 。 然后在用戶輸入發生后調用的事件上，刪除零寬度無中斷空間。
我在使用 Unicode 空間問題時遇到了很多問題，主要是糟糕的用戶體驗。 這可以防止用戶知道存在問題。
使用 inline-block 對 contenteditable 內的元素應用最小高度和最小寬度可以做一些好事，盡管這種影響會產生意想不到的副作用：
#multiple * {
min-height: 1em;
}
span, b, strong, i, em, a, etc {
display: inline-block;
min-width: 1em;
background-color: hsla(0, 50%, 50%, .5); /* this is only a visual aid; discard @ will */
vertical-align: middle; /* so elements w/ inline-block align w/ text correctly */
}
你會發現仍然存在問題，但如果你願意為一小部分其他問題犧牲一些問題，這可能會很好。
在Chrome的contenteditable元素的節點內將插入符位置設置為零
[英]Set caret position to zero inside node of contenteditable element in chrome
將插入符號（光標）設置在可疑段落中的粗體元素內
[英]setting caret (cursor) inside bold element present inside contenteditable paragraph
在contenteditable div中的插入位置之前和之后獲取節點/元素
[英]Get node/element before and after caret position in contenteditable div
JavaScript'contenteditable' - 獲取/設置插入位置
[英]JavaScript 'contenteditable' — Getting/Setting Caret Position
設置innerHTML時，插入符位置會在contenteditable中重置
[英]Caret position resets in contenteditable when setting innerHTML
如何保持插入符號在 contenteditable 元素中的位置
[英]How to keep the position of the caret in contenteditable element
獲取一個元素的子節點索引，該元素的插入符號位置到它的 contenteditable 父元素
[英]Get the child node index of an element having the caret position to its contenteditable parent element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.