Question

我正在尝试创建虚假输入并模拟其行为。 input将是div元素，其中的每个字符都是span元素。这是demo

这是问题所在 - 当我在elment之后插入我的“光标”时，它在视觉上坚持下一个元素。如果我从“mock-cursor”中删除width属性 - 文本正在跳转。我希望“光标”位于两个字符之间的中心。但我不确定如何实现这一点。

代码也可以在这里找到

 //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边框看起来更像是一个插入符号。由于您在字符之间插入元素，因此可以使用next-sibling选择器来偏移插入符号的宽度，如：

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

这是一个演示：http://jsfiddle.net/huu2a9gx/1/

假游标的样式

2 个答案: