Geek Answers Handbook

Down arrow key inside a div containing an image

I am changing the bootstrap based HTML editor. I did an image upload. In loading images, I create an image inside a div.

<div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;">
    <img src="uploads/images/dark_knight.jpg"> 
</div>

I want the image to be resized,

element.style {
   border: 1px solid;
   padding: 10px;
   width: 300px;
   resize: both;
   overflow: auto;
  }

But the problem is that when I press the cursor down, it happens inside the div containing the image (instead of the below div).

so what changes should I make to move the cursor below the div when I press a key?

+4
source share
2 answers

Demo: http://jsfiddle.net/u37cxxbh/2/

Make a div contenteditable="false"and add an item textareanext to the image. As in the example above.

+1
source

Just adding

contenteditable="false"

div, , , .

#editor {
  overflow: scroll;
  max-height: 250px;
  height: 250px;
  background-color: white;
  border-collapse: separate;
  border: 1px solid rgb(204, 204, 204);
  padding: 4px;
  box-sizing: content-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow: scroll;
  outline: none;
}
div {
  display: block;
}
<div id="editor" contenteditable="true">First line
  <div>
    //after clicking down arrow key cursor going inside an image div

    <div style="border: 1px solid;padding: 10px; width: 300px;resize: both;overflow: auto;" contenteditable="false">
      <img src="abcd.jpg">
    </div>

  </div>
  <div>
    <br>
  </div>
  <div>Last line</div>
</div>
Hide result
+1

More articles:


All Articles