how to input out of html labels in contenteditable div

see the code at

`http://ift.tt/2m6p7ob`

using chrome. after adding a span label to a part of the content in a contenteditable div, if i put input cursor after the labeled part by clicking, type something, the new chars always be appended inside the span label.

like <-span->[A](INPUT CURSOR HERE)<-/span->

i want to set the cursor out of the span label.

like <-span->[A]<-/span->(INPUT CURSOR HERE)

how to do it?