javascript - How to trigger 'contenteditable' element into edit state using js? - Stack Overflow

admin管理员组

文章数量:1355564

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: /

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: https://jsfiddle/lfree/vkeq9fza/1/

• javascript
• html

Share Improve this question Follow asked Jan 21, 2017 at 7:21 lfreelfree 2,23644 gold badges2727 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You just need to focus the div:

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

div.focus();

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

If I understand correctly, all you're trying to do is set focus to the element. Because you've already enabled contenteditable, the following should be adequate:

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

本文标签： javascriptHow to trigger 39contenteditable39 element into edit state using jsStack Overflow