стиль поддельного курсора

Question

Я пытаюсь создать поддельный ввод и подражать его поведению. вход будет элементом div и каждым символом в нем элементом span. здесь demo

вот проблема - когда я вставляю свой «курсор» после того, как elment его визуально вроде прилипает к следующему элементу. Если я удалю свойство width из «mock-cursor» - текст прыгает. Я хотел бы, чтобы «курсор» располагался в центре между двумя символами. но я не уверен, как это достичь.

код также доступен здесь

//html 

<div id="inputEmulation"> 
    <div id='mock-cursor'>|</div> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
    <span>5</span> 
    <span>6</span> 
    <span>7</span> 
    <span>8</span> 
    <span>9</span> 
    <span>0</span> 
</div> 
<button id = "moveCursor">Move cursor</button> 

Теперь мне нужно эмулировать движение курсора между символами

здесь стиль и простой Javascript код для демонстрации. это то, что у меня до сих пор

//javascirpt 
    var cursor = "<div id='mock-cursor'>|</div>", 
    i = 0; 

    $("#moveCursor").click(function(){ 
     if(i<10){ 
      $("#mock-cursor").remove(); 
      $(cursor).insertAfter($("#inputEmulation span")[i]) 
      i++; 
     } 
    }) 


//css 
#inputEmulation{ 
    width:200px; 
    height:40px; 
    display: inline-block; 
    border: 2px solid rgba(0,176,235,0.8); 
    border-radius:6px; 
    color:#FFFFFF; 
    padding: 0 10px; 
    font-size: 22px; 
    background:rgba(10,150,197,0.8); 
    box-sizing: border-box; 
    text-align:left; 

} 
#inputEmulation span{ 
    margin: 10px 0px; 
} 


#mock-cursor { 
    display: inline-block; 
    color: white; 
    -webkit-animation: blink 1s infinite; 
    animation: blink 1s infinite; 
    font-size: 1.2em; 
    font-weight: lighter; 
    width:0; 
} 


@-webkit-keyframes blink { 
    0%, 49.9%, 100% { opacity: 0; } 
    50%, 99.9% { opacity: 1; } 
} 


button { 
    display:block 
    width:40px; 
    height:40px; 
    cursor:pointer; 
} 

Answer 1

Tomek предоставил быстрый ответ на ваш вопрос в его комментарии.

Чтобы сделать его более похожим на реальный курсор, сделайте его более тонким и сделайте его выше текста. Проверьте это updated fiddle. Он также использует position:absolute, так что вы можете использовать width -трибут без проблем.

Answer 2

Я согласен, что это довольно загадочная идея (особенно если вы собираетесь использовать полную эмуляцию ввода), но эй, почему бы и нет.

По-моему, граница 1px выглядит лучше, чем каретка. Так как вы вставляя элемент между символами, вы можете использовать селектор следующих родственный, чтобы компенсировать ширину каретки, как:

#mock-cursor + span{ 
    margin-left: -1px; //caret-width 
} 

Вот демо: http://jsfiddle.net/huu2a9gx/1/