在向下箭头键光标进入包含图像的 div 内答案

【问题标题】：On down arrow key cursor going inside a div containing image在向下箭头键光标进入包含图像的 div 内
【发布时间】：2015-05-13 11:15:42
【问题描述】：

我正在修改基于引导程序的 HTML 编辑器。我已经完成了图片上传部分。在图片上传中，我正在一个 div 中创建一个图片。

<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
    <img src="uploads/images/dark_knight.jpg"> 
</div>

因此我希望图像可以调整大小，

element.style {
   border: 1px solid;
   padding: 10px;
   width: 300px;
   resize: both;
   overflow: auto;
  }

但问题是当我按下向下键时，光标会进入包含图像的 div 内部（而不是 div 下方）。

那么我应该做些什么更改才能在按下键时将光标置于 div 下方？

【问题讨论】：

您能否包含更多代码，即项目当前状态的工作表示？一个 JSFiddle 会很好。另外，我不清楚您到底需要什么。我是否理解正确：1）您正在谈论一个编辑器，用户可以在其中将图像放置在
中。 2）当输入光标（焦点）在div上方，并且用户按下向下箭头时，您希望它跳过div下方而不是内部？
jsfiddle.net/govi20/u37cxxbh 这里 jsfiddle 给你。抱歉格式错误，这是基于引导程序的 HTML 编辑器生成的代码。

标签： javascript jquery html css html-editor

【解决方案1】：

演示： http://jsfiddle.net/u37cxxbh/2/

制作 div contenteditable="false" 并在图片旁边添加 textarea 元素。如上例所示。

【讨论】：

【解决方案2】：

只需添加

contenteditable="false"

到包含图像的 div 似乎可以解决问题。

#editor {
  overflow: scroll;
  max-height: 250px;
  height: 250px;
  background-color: white;
  border-collapse: separate;
  border: 1px solid rgb(204, 204, 204);
  padding: 4px;
  box-sizing: content-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow: scroll;
  outline: none;
}
div {
  display: block;
}

<div id="editor" contenteditable="true">First line
  <div>
    //after clicking down arrow key cursor going inside an image div

    <div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
      <img src="abcd.jpg">
    </div>

  </div>
  <div>
    <br>
  </div>
  <div>Last line</div>
</div>

【讨论】：

不会让所有内容都无法编辑，也不会单独修复光标超出内部 div 问题