複数のコンテンツ編集可能なdiv：on上にジャンプすると上に戻る - 上に戻る - Chrome

Question

私の要件は、幅と高さの修正可能なdiv（オーバーフロー、したがって最大高さ）の編集可能なdivです。

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

問題：オーバーフローした後、あなたはdivの内側に書かれたテキストの間にEnterキーを押すと、DIV自体が下向きに起こっているとあなたがバックスペースを押すと、それが上向きになるだろう。

私の短い洞察は：問題はDIVするheight属性を追加した後であり、それは他の私が試してみましたmultpleコンテンツの編集可能なの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>