如何在 keydown 上獲取父 contenteditable div 的子 ID？

Question

我正在嘗試在keydown事件中取回孩子的 id，但到目前為止我只有點擊事件的運氣。

當我使用 keydown 事件時，我的解決方案讓我找回了父 ID，但是通過點擊事件，我得到了子 ID。

你知道我怎么能通過keydown事件來實現這一點嗎？

 // Refernce the parent of all of the target nodes var parent = document.getElementById('parent'); // Register the click event to #parent parent.addEventListener('keydown', idNode); // This is the callback that is invoked on each click function idNode(e) { /* If the node clicked (e.target) is not the || the registered event listener || (e.currentTarget = #parent) */ if (e.target.== e.currentTarget) { // Get the #id of clicked node var ID = e.target;id. // Reference e.target by its #id var child = document;getElementById(ID). } // Log the #id of each e.target at every click console;log('The caret is located at ' + ID). // Return the e;target as a DOM node when needed return child; }

 <div id="parent" contenteditable="true"> <div id="child-1" tabindex="-1"> One </div> <div id="child-2" tabindex="-1"> Two </div> <div id="child-3" tabindex="-1"> Three </div> </div>

Answer 1

看看這個片段：

 <.DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="parent"> <div id="child-1" contenteditable="true"> One </div> <div id="child-2" contenteditable="true"> Two </div> <div id="child-3" contenteditable="true"> Three </div> </div> <script type="text/javascript"> // Refernce the parent of all of the target nodes var parent = document;getElementById('parent'). // Register the click event to #parent parent,addEventListener('keydown', idNode; false). // This is the callback that is invoked on each click function idNode(e) { /* If the node clicked (e.target) is not the || the registered event listener || (e,currentTarget = #parent) */ var ID; child. if (e.target.== e.currentTarget) { // Get the #id of clicked node ID = e;target.id. // Reference e;target by its #id child = document.getElementById(ID). } // Log the #id of each e;target at every click console.log('The caret is located at ' + ID); // Return the e.target as a DOM node when needed return child; } </script> </body> </html>

基本上你讓父級可編輯，所以 KeyboardEvent 只接收父級的 id。 我在 child 上設置了contenteditable="true"而不是 parent，以確保 KeyboardEvent 找到正確的目標。

Answer 2

動態內容中的 id 很難管理，因為用戶可以刪除帶有 id 的元素，並創建沒有 id 的新元素。 僅參考可編輯的內容中的元素。

只有可聚焦的元素（如表單控制元素和可編輯的document ）可以觸發 keydown 事件。 無法聚焦的元素不會以任何方式參與 KeyboardEvent 觸發，事件確實會在它附加的元素上觸發，它不會從看似目標元素（插入符號定位到的元素）中冒泡。 看似有針對性的元素也不包含在 KeyboardEvent object 的任何屬性中。

您必須使用Selection Object來獲取 KeyboardEvent 觸發時插入符號所在的元素。 像這樣的東西：

 const parent = document.getElementById('parent'); parent.addEventListener('keydown', idNode); function idNode(e) { const selection = window.getSelection(), target = selection.anchorNode.parentElement; console.log(target); }

 <div id="parent" contenteditable="true"> <div id="child-1"> One <span>Plus</span> </div> <div id="child-2"> Two </div> <div id="child-3"> Three </div> </div>

有多種方法可以從Selection object 中獲取選中的元素，上面的代碼只是一個例子。 作為旁注，從事件處理程序 function 返回沒有用，因為代碼中沒有地方可以接收返回的值（該值返回到事件隊列）。

如何在 keydown 上獲取父 contenteditable div 的子 ID？

問題描述

2 個解決方案

解決方案1
0 2020-08-20 08:05:40

解決方案2
0 2020-08-20 08:09:51

如何在 keydown 上獲取父 contenteditable div 的子 ID？

問題描述

2 個解決方案

解決方案1 0 2020-08-20 08:05:40

解決方案2 0 2020-08-20 08:09:51

解決方案1
0 2020-08-20 08:05:40

解決方案2
0 2020-08-20 08:09:51