如何将闪烁的光标沿着文本移动，就好像它是一个带有两个按钮的普通光标一样?如果可能的话，首选香草javascript

Question

我的目标是让它在按下按钮时来回移动，就好像它是一个真正的光标

<div>
hello<span id="hi"></span>
</div>
<button onclick="move('left')">left</button>
<button onclick="move('right')">right</button>

我不知道如何在文本中定位跨度，然后按下按钮将其移动到一边，这样只需向左按一次就可以从hello|进入hello|o

function move(direction){
switch (direction) {
case "left":
break;
case "right":
break;
}
}

所有的css都很好

span {
content: '';
width: 3px;
height: 17px;
background: black;
opacity: 0;
display: inline-block;
animation: blink 0.5s linear infinite alternate;
}
@keyframes blink {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Answer 1

您需要考虑的方式是，您的文档是一棵树(如在数据结构中(，因为浏览器就是这样看待它的。这意味着您要处理的部分有三个部分：

div
.....[text]
..... span
.....[text]
div

这三个都是父div的子级，因此它们将在其childNodes集合中。两个是文本节点，另一个是跨度元素。

text节点类型具有textContent属性，可用于获取或设置节点中的文本。类似这样的东西：

const myDiv = document.getElementsByTagName('div')[0]; // assuming you only have one div, more practical to give your div an id and use document.getElementById("my-id");
myDiv.childNodes[0].textContent = "hello";

这看起来像是一个小作业，当然似乎是一个很好的学习机会，所以我不会写代码，而是走捷径。我将在你的功能中经历的过程是：

1. 找到父div-也许上面有id会更容易
2. 读取其第一个子项的textContent
3. 读取其最后一个子项的textContent
4. 如果向左移动，则要删除第一个子项中的最后一个字符，并将其放在最后一个子项的开头。如果第一个孩子是空的，什么也不做
5. 如果向右移动，则要删除最后一个子项的第一个字符，并将其放在第一个子项的最后一个字符上。如果最后一个孩子是空的，什么也不做

注意，通过这种方式，我们不会对span做任何事情，而是在它周围移动文本。

为了获得额外的繁荣，你可以创建一个对象来维护对有问题的文本节点的引用，这样你就不必每次点击按钮都检索它们。