Question

我正在尝试创建自定义输入插入符号。我已经取得了一些成就，但并非全部我想要自定义闪烁动画，我明白了。但是现在我希望我的自定义插入符号在我输入任何内容时向右移动（如真正的插入符号）顺便说一句，我正在使用<i>元素来模仿真实插入符号的效果以下是我的工作准则。

.cursor {
   position: relative;
}
.cursor i {
   position: absolute;
   width: 1px;
   height: 80%;
   background-color: gray;
   left: 5px;
   top: 10%;
   animation-name: blink;
   animation-duration: 800ms;
   animation-iteration-count: infinite;
   opacity: 1;
}

.cursor input:focus {
   caret-color: transparent;
}

@keyframes blink {
   from { height: 0%;
          top: 50%;}
   to { height:80%;
        top:10%;}
}

<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>

有人可以为此建议Javascript / Jquery吗？ 非常感谢！：）

Answer 1

如果你有能力排除一些旧版浏览器，可以这样做：

<div>
  <span class="rq-form-element" contentEditable></span>
  <i></i>
</div>

该范围将成为可修改的字段，因为我们正在为其添加contentEditable属性。您可能必须使用一些额外的CSS来正确设置样式，但它会在您键入时自动移动<i></i> - 只要您不将宽度设置为rq-form-element。

当我输入一个字母时，如何在右边移动div（就像输入插入符号一样）？

1 个答案: