我想使用“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/ https://jsfiddle.net/lfree/vkeq9fza/1/
你只需要focus
该div:
let div = document.querySelector('div');
div.focus();
<div contenteditable="true">Div Content</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)