Question

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

问题：溢出后，如果在div内写入文本之间按Enter键，则div本身向下，如果按退格键，则向上移动。

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

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

＆＃13;

$('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;
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

多个内容可编辑div：on输入向下跳跃和退格 - 向上 - Chrome

1 个答案: