Javascript - 在[contenteditable]的子元素中獲取插入符號元素

我正在使用Javascript構建一個簡單易用的文本編輯器，基本上是一個所見即所得的編輯器。我將使用contenteditable屬性作爲主包裝（.wrapper）。當您在.wrapper內按下輸入時，會將帶有唯一id的新<p>元素附加到包裝。Javascript - 在[contenteditable]的子元素中獲取插入符號元素

我需要一種方法來獲取當前選擇的.wrapper的哪個子元素（即正在聚焦或在其中有插入/文本標記）。

我搜索了幾天沒有任何結果，我試過使用document.elementFromPoint()但沒有任何正確的結果。

當使用$(":focus")時，我得到整個.wrapper而不是特定的子元素。

編輯：

例HTML結構：

<div class="container t-wrapper" contenteditable> 
</div>

實施例的Javascript代碼：

$(document).ready(function() { 
    $currentElement = $("[contenteditable]"); 

    $(".t-wrapper").each(function() { 
     var id = generateIdentifier(6); // Ignore this 

     /* This creates the initial <p> child element, where you start typing. */ 
     $(this).html('<p class="t-empty t-first" id="' + id + '"></p>'); 

     $(this).on("mouseup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 

     $(this).on("keyup", function() { 
      /* $currentElement = whatever element the caret is inside. */ 
     }); 
    )); 
});

編輯2：

我設法GE它與mouseup事件相當合作，因爲你實際上點擊了一些東西。但是，在使用鍵盤移動插入符號時，我需要此功能。或者，我需要一些方法來獲取插入符號的位置，然後使用document.elementFromPoint()來獲取特定元素。

來源

2016-02-29 Daniel Hallgren

您是否嘗試過只對選定的節點上使用CONTENTEDITABLE？例如，您可以將新的'p'設置爲'contenteditable =「true」'，同時禁用所有其他元素。在瀏覽節點樹時（單擊或箭頭鍵），可以將'contenteditable'屬性移到下一個元素。這似乎至少可以使用'：focus'搜索子節點。 –

有一段代碼嗎？ –

@ freestock.tk添加了一些基本的示例代碼。 –

-1

document.activeElement將返回當前的焦點元素。

來源

2016-02-29 22:20:09

這與編寫'$（「：focus」）'相同，這標誌着整個'.wrapper'，因爲那是我想是'contenteditable'屬性。 –

:focus不會選擇您的元素，因爲它們不可聚焦。

您可以通過在HTML中添加tabindex="-1"或在JS中添加tabIndex = -1來使它們變得可以聚焦。

var generateIdentifier = Math.random; 
 
var currentElement = document.querySelector("[contenteditable]"); 
 
[].forEach.call(document.querySelectorAll(".t-wrapper"), function(el) { 
 
    var first = document.createElement('p'); 
 
    first.className = "t-empty t-first"; 
 
    first.id = generateIdentifier(6); 
 
    first.textContent = 'Press enter to create new paragraphs'; 
 
    first.tabIndex = -1; 
 
    el.appendChild(first); 
 
});

.container > :focus { 
 
    border: 1px solid blue; 
 
}

<div class="container t-wrapper" contenteditable></div>

看來，如果你把它添加到第一款，新段自動獲取它。但是，如果你想確定，我想你可以使用一個突變的觀察者或keyup事件偵聽器來檢測段沒有tabindex，並將其添加：

el.addEventListener("keyup", function(e) { 
    var newChild = el.querySelector('p:not([tabindex])'); 
    if(newChild) newChild.tabIndex = -1; 
});

來源

2016-03-02 19:24:54 Oriol

謝謝你的回覆！我一定會測試這個。你首先提到'tabindex =「1」'，但在你指定索引爲'-1'的代碼中。這是爲什麼？錯字？ –

@DanielPox我的意思是'-1'。當你按Tab鍵時，焦點會根據'tabindex'轉到下一個可調焦元素。 'tabindex = -1'使得元素可以被聚焦，但是不能被tab鍵迭代。如果您希望它們是可迭代的，請使用正數。 – Oriol

該死的，即使它們是可以對焦的，當你寫入段落時，Chrome也不會考慮段落。 – Oriol

Javascript - 在[contenteditable]的子元素中獲取插入符號元素

回答

相關問題