Prevent Cursor durch Checkbox in contenteditable

Question

vorbei Ich erstelle eine ToDo Liste, und ich bin mit contenteditable dafür, fügte ich contenteditable in meinem ul, becuse Ich möchte meine gesamte Inhalt editierbar machen.

Was ich will ist, verhindern Caret durch Kontrollkästchen. Gibt es eine Möglichkeit, dies zu tun ?! Vielen Dank im Voraus!

.radio-btn { 
 
float: left; 
 
} 
 
li { 
 
list-style: none; 
 
} 
 
ul { 
 
    
 
padding: 0; 
 
} 
 
.radiobtn { 
 
    display: inline; 
 
    
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <ul class="list" contenteditable="true"> 
 
      <li > 
 
       <div class="radiobtn" aria-checked="false" aria-disabled="false" role="checkbox"> 
 
        <input tabindex="3" type="radio" name="demo-radio"> 
 
       </div> 
 
       Some paragraph here 
 
      </li> 
 
      </ul>

Answer 1

Wenn ich richtig verstehe, Sie Spanne hinzufügen und geben es den Fokus: pasteHtmlAtCaret('<div class="radiobtn" contenteditable="false" aria-checked="false" aria-disabled="false" role="checkbox"> <input tabindex="3" type="radio" name="demo-radio"></div><span focus="true"></span>')

dieses plunkr Siehe: http://plnkr.co/edit/IIGkKqQvPv7iZ6H73BGG

// Edit:

Versuchen Sie dieses CSS:

li { 
list-style: none; 
position:relative; 
margin-left:20px; 
} 

.radiobtn { 
    display: inline; 
    position:absolute; 
    left:-20px; 
} 

Damit ist das Radio aus dem <li> Tag, und das Caret ist nicht durch!