javascript - 多个内容可编辑的 div : on Enter jumping downward and on Backspace- upward - Chrome

Question

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

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

问题:溢出后，如果您在 div 内的书面文本之间按 enter，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

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

最小高度: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>