CODEWITHSUNDEEP
javascripthtmlcsscontenteditable
rhitz
rhitz

Reputation: 1892

Multiple Content Editable div : on Enter jumping downward and on Backspace- upward - Chrome

my requirement was multiple adjacent content editable div of fix width and height (scroll on overflow, hence max-height).

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

Problem : After overflow, if you press enter in between the written text inside the div, the div itself is going downward and if you press backspace it is going upward.

My short insight : Problem is after adding height attribute to div and it happens for multple content editable divs (adjacent)

I have tried, other SO answers, none of them I found fixed this issue. 

$('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>

Upvotes: 0

Views: 159

Answers (1)

user4447799
user4447799

Reputation:

Interesting issue. I haven't seen something like this before. Neither do I know the reason. I tried using min-height instead of the usual height

min-height: 200px.

This seems to fix the issue.

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>

Upvotes: 1

Related Questions