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

本文介绍了如何使用js触发'contenteditable'元素进入编辑状态？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用'contenteditable'属性实现元素插入编辑。是否可以使用鼠标事件模拟而不是用户点击进入编辑状态？

I want to implement element in-placing edit using 'contenteditable' attribute. Is it possible to go into the edit state with mouse event simulation instead of user click?

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：

推荐答案

你只需焦点 div：

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

div.focus();

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

这篇关于如何使用js触发'contenteditable'元素进入编辑状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！