为什么触发单击contenteditable不会激活元素并设置光标

Question

我希望在模拟的单击事件中使用光标变为活动状态，但这不会发生 - 元素不会被激活。为什么？我需要将光标放在与用户单击位置完全相同的位置，这就是为什么我使用click事件，因为它包含坐标。

我创建this简单的设置来说明问题（点击CONTENTEDITABLE DIV中）：

HTML

<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div> 

JS

$(function() { 
    var editable = $('[contenteditable]'); 
    var event, initial = true; 
    editable.on('click', function(e) { 
     event = e; 
     console.log('writing event', event); 

     if (initial) { 
      initial = false; 
      editable.blur(); 
      setTimeout(function() { 
       console.log('trigger click'); 
       editable.trigger(e); 
      }, 3000); 
     } 
    }); 
}); 

Answer 1

我相信你正在寻找触发focus事件，它会将光标置于该框中，并允许您编辑内容，而不必实际单击div内部。那是你想要做的吗？

$(function() { 
 
    var editable = $('[contenteditable]'); 
 
    setTimeout(function() { 
 
    editable.trigger('focus'); 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;">some text</div>