如何触发'contenteditable'元素使用js进入编辑状态? [英] How to trigger 'contenteditable' element into edit state using js?
本文介绍了如何触发'contenteditable'元素使用js进入编辑状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用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');
});
演示:https://jsfiddle.net/lfree/vkeq9fza/1/
推荐答案
你只需要focus
div:
let div = document.querySelector('div');
div.focus();
<div contenteditable="true">Div Content</div>
这篇关于如何触发&#39;contenteditable&#39;元素使用js进入编辑状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文