javascript - 单击方法仅在纯 JavaScript 中不选择 contenteditable 元素

Question

我想点击一个间接触发器，它将选择 contenteditable 元素 AKA 编辑容器

我尝试使用 .click() 方法创建这种效果，但它不起作用，它没有给我想要的结果，所以我该怎么做呢？如果我必须使用其他方法来执行此操作，那么我不介意。

这是我的代码

 document.addEventListener('DOMContentLoaded',function(){
  
  document.querySelector('#indirect-trigger').addEventListener('click',indirectTrigger);
  
  function indirectTrigger(){
    document.querySelector('#edit-container').click();
  }
  
});

 #edit-container{
  background-color: red;
  height: 100px;
  width: 100px;
  margin-bottom: 25px;
}

#indirect-trigger{
  background-color: gray;
  color: white;
  display: inline-block;
  padding: 5px;
  border-radius: 8px;
  
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  
  cursor: pointer;
}

<div id='edit-container' contenteditable='true'>
  
</div><!--<edit-container>-->

<p id='indirect-trigger'>Indirect trigger</p>

Answer 1

单击内容可编辑元素用于将焦点设置在那里。直接调用focus()。

document.addEventListener('DOMContentLoaded', function() {

  document.querySelector('#indirect-trigger').addEventListener('click', indirectTrigger);

  function indirectTrigger() {
    document.querySelector('#edit-container').focus();
  }

});

#edit-container {
  background-color: red;
  height: 100px;
  width: 100px;
  margin-bottom: 25px;
}

#indirect-trigger {
  background-color: gray;
  color: white;
  display: inline-block;
  padding: 5px;
  border-radius: 8px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
}

<div id='edit-container' contenteditable='true'>

</div>
<!--<edit-container>-->

<p id='indirect-trigger'>Indirect trigger</p>