多个内容可编辑的 div：在 Enter 上向下跳跃和在 Backspace 上向上 - Chrome

Question

我的要求是固定宽度和高度的多个相邻内容可编辑 div（溢出时滚动，因此是最大高度）。

http://jsfiddle.net/3gut98sw/4/

问题 : 溢出后，如果在 div 内的文字之间按回车键，则 div 本身是向下的，如果按退格键是向上的。

我的简短见解：问题是在向 div 添加高度属性之后，它发生在多个内容可编辑的 div（相邻）

我已经尝试过，其他 SO 答案，我发现没有一个解决了这个问题。

$('div[contenteditable=true]').keydown(function(e) {
  // trap the return key being pressed
  if (e.keyCode == 13) {
    // insert 2 br tags (if only one br tag is inserted the cursor won't go to the second line)
    document.execCommand('insertHTML', false, '<br><br>');
    // prevent the default behaviour of return key pressed
    return false;
  }
});

div {
  background: skyblue;
  padding: 10px;
  height: 200px;
  max-height: 200px;
  overflow: auto;
  display: inline-block;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident
  dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
  <br><br> Type some stuff, hit ENTER a few times, then press the button.
</div>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident
  dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
  <br><br> Type some stuff, hit ENTER a few times, then press the button.
</div>

Answer 1

有趣的问题。我以前从未见过这样的事情。我也不知道原因。我尝试使用 min-height 而不是通常的高度

min-height: 200px.

这似乎解决了问题。

div {
  background: skyblue;
  padding: 10px;
  min-height: 200px;
  max-height: 200px;
  overflow: auto;
  display: inline-block;
  width: 200px;
}

<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident
  dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
  <br><br> Type some stuff, hit ENTER a few times, then press the button.
</div>
<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident
  dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
  <br><br> Type some stuff, hit ENTER a few times, then press the button.
</div>