How can we set caret position right after image if we click image.
Javascipt + JQuery
for (i = 1; i <= 5; i++) {
console.log("hiiii");
$('.demo').append('<span><img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"/></span>')
}
CSS
div {
height: 100px;
background: #dadadada;
}
img {
border: 1px solid red;
display: inline-block;
height: 30px;
width: 30px;
margin-right:3px;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo" contenteditable="true"></div>
this is jsfiddle link http://jsfiddle.net/mustkeom/by6tkrfL/10/
If I click on image I want cursor to move to right to image. But as of now cursor just dont move. It only set its position if i click execly between the images. Any help is appreciate. Please sugest how can we do that.