如何在表 td 中添加闪烁的文本光标（插入光标）答案

【问题标题】：How to add a blinking text cursor (Caret cursor) in table td如何在表 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 内容中设置插入符号，因此请查看现有问题/答案，例如 stackoverflow.com/questions/6249095/…

标签： html css xml xslt

【解决方案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 是不可编辑的，它只是以表格形式显示内容。