jsを使用して 'contenteditable'要素を編集状態にする方法はありますか？

Question

'contenteditable'属性を使用して要素内配置編集を実装したいと思います。ユーザーのクリックではなくマウスイベントシミュレーションで編集状態に入ることは可能ですか？

function triggerEvent(element, eventType) { 
    let rect = element.getBoundingClientRect(); 
    console.log(rect); 

    let event = new MouseEvent(eventType, { 
    clientX: rect.left + 20, 
    clientY: rect.top + 10, 
    view: window, 
    buttons: 1, 
    bubbles: true, 
    }); 
    element.dispatchEvent(event); 
} 

document.getElementById('btn').addEventListener('click', (event) => { 
    let editArea = document.getElementById('edit-area'); 
    editArea.setAttribute('contenteditable', true); 

    triggerEvent(editArea, 'mousedown'); 
}); 

DEMO：私が正しく理解していればhttps://jsfiddle.net/lfree/vkeq9fza/1/

Answer 1

：

let div = document.querySelector('div'); 
 

 
div.focus();

<div contenteditable="true">Div Content</div>

を

Answer 2

、あなたがやろうとしているすべての要素にフォーカスを設定されています。すでにcontenteditableを有効にしているので、以下では十分なはずです：

editArea.setAttribute('contenteditable', true); 
editArea.focus(); // Focus on the input which will activate editing 

あなただけのdiv focusする必要があり