如何使用js触发'contenteditable'元素进入编辑状态？答案

【问题标题】：How to trigger 'contenteditable' element into edit state using js?如何使用js触发'contenteditable'元素进入编辑状态？
【发布时间】：2017-01-21 15:25:41
【问题描述】：

我想使用“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');
});

演示：https://jsfiddle.net/lfree/vkeq9fza/1/

【问题讨论】：

标签： javascript html

【解决方案1】：

你只需要focus这个div：

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

div.focus();

&lt;div contenteditable="true"&gt;Div Content&lt;/div&gt;

【讨论】：

【解决方案2】：

如果我理解正确，您要做的就是将焦点设置在元素上。因为您已经启用了contenteditable，所以以下内容应该足够了：

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

【讨论】：