点击一个可疑的div剧照外面的焦点？

出于某种原因,我需要使用contenteditable div而不是普通的文本输入来输入文本.(对于一些javascript库)它工作正常,直到我发现当我设置contenteditable div使用时display: inline-block,即使我点击div之外,它也会给div提供焦点!

我需要它只有当用户点击div而不是它周围时才给焦点div.目前,我发现当用户点击其他地方然后单击与div相同的行的位置时,它会关注它.

一个显示问题的简单示例:

HTML:

    

        Input 1
    
    

        Input 2
    
    
This is some unrelated content

      This is some more unrelated content
      This is just some space to shows that clicking here doesn't mess with the contenteditable div
      but clicking the side mess with it.
    

CSS:

div.outside {
  margin: 30px;
}
div.text-input {
  display:inline-block;
  background-color: black;
  color: white;
  width: 300px;
}

用于显示问题的JSFiddle

是否有一种方法(CSS或javascript都可以接受)使浏览器只在点击它时给焦点而不是点击同一行？

PS我注意到有类似的问题(链接到其他相关的帖子),但情况有点不同,提供的解决方案对我不起作用.

解释(如果您不在乎,请跳至下面的解决方法)

当您单击可编辑元素时,浏览器会将光标(也称为插入点)放置在单击元素内最近的文本节点中,与您单击的行位于同一行.文本节点可以直接位于被点击的元素内,也可以位于其子元素之一中.您可以通过运行下面的代码段并在大蓝框中单击来验证这一点.

.container {width: auto; padding: 20px; background: cornflowerblue;}
.container * {margin: 4px; padding: 4px;}
div {width: 50%; background: gold;}
span {background: orange;}
span > span {background: gold;}
span > span > span {background: yellow;}

  text in an editable element
  

    text in a nested div
  
  text in a deeply nested span
Notice that you can get an insertion point by clicking above the first line or below the last. This is because the "hitbox" of these lines extends to the top and bottom of the container, respectively. Some of the other answers don't account for this!

div.outside {
  margin: 30px;
}
div.text-input {
  display:inline-block;
  background-color: black;
  color: white;
  width: 300px;
}
div.text-input-container {
  -webkit-user-select: none;
}
.invisible {
  visibility: hidden;
}

    

        ​

            Input 1
        
        

            Input 2
        
    
    
This is some unrelated content

      This is some more unrelated content
      This is just some space to shows that clicking here doesn't mess with the contenteditable div
      but clicking the side mess with it.