如何在表 td 中添加闪烁的文本光标（插入光标）
Posted
技术标签:
【中文标题】如何在表 td 中添加闪烁的文本光标（插入光标）【英文标题】：How to add a blinking text cursor (Caret cursor) in table td 【发布时间】：2021-11-08 17:13:53 【问题描述】：我有一个 XSL 模板。在表格中，在“问候”之前，我需要添加一个闪烁的文本光标。目前，光标仅在单击时出现。但是，我需要该光标默认出现在“问候”之前。
图 1
图二
我需要该光标出现在“问候”之前，如图像 2
<xsl:template>
<html>
<body>
<table style="padding: 0px; width: 100%;">
<tr>
<td>Greetings,</td>
</tr>
</table>
</body>
</html>
</<xsl:template>
【问题讨论】：
除非您有可编辑的内容，否则我认为浏览器不会显示闪烁的文本插入符号/光标。因此，您必须考虑生成像 textarea 这样的可编辑元素，并使用 javascript 或可编辑的 HTML 元素专注于它，您还可以在其中使用 JavaScript 聚焦/设置选择。但是对于纯 HTML 或 XSLT 生成的 HTML，所有这些都是相同的，因此您只需要查看 HTML/JavaScript 部分。 @MartinHonnen 我的表格是可编辑的内容。如果我点击问候语附近的任何地方，光标就会出现并且我可以输入。我只想让光标默认出现在开头。 据我所知，您需要 JavaScript 在浏览器的可编辑 HTML 内容中设置插入符号，因此请查看现有问题/答案，例如 ***.com/questions/6249095/… 【参考方案1】：如果它是一个表格，我不明白单击光标时如何可见。因为它不是输入字段类型的元素，它只是一个纯文本。但是，您所要求的可以通过自定义 css 类来实现。
在 Greetings 文本之前添加一个带有 | 的 span 元素，如下所示：
HTML：
<html>
<body>
<table style="padding: 0px; width: 100%;">
<tr>
<td><span class="blinking-cursor">|</span>Greetings,</td>
</tr>
</table>
</body>
</html>
CSS：
.blinking-cursor
font-weight: 500;
font-size: 20px;
color: #2e3d48;
-webkit-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
@keyframes "blink"
from,
to
color: transparent;
50%
color: black;
@-webkit-keyframes "blink"
from,
to
color: transparent;
50%
color: black;
这里是 codepen 演示：https://codepen.io/Hitesh_Vadher/pen/xxrrQzR?editors=1100
【讨论】：
试过了，这只是添加了一条闪烁的线而不是光标。我应该可以从光标处输入。 那么你必须使用输入元素。 td 是不可编辑的元素。你不能那样做。 是否可以在td前加光标 使用 textarea 或 text 类型的输入元素供您使用。然后你可以添加闪烁的光标。 不，不是。 td 是不可编辑的，它只是以表格形式显示内容。以上是关于如何在表 td 中添加闪烁的文本光标（插入光标）的主要内容，如果未能解决你的问题，请参考以下文章