如何在XSL模板的表格td中默认添加位于Greetings前的闪烁文本光标（Caret）

解决方案 #

修改后的XSL模板代码如下：

<xsl:template>
    <html>
         <body>
           <table style="padding: 0px; width: 100%;">
             <tr>
               <td id="greetingCell" contenteditable="true">Greetings,</td>
             </tr>
          
           </table>
           <script>
               window.onload = function() {
                   const cell = document.getElementById('greetingCell');
                   // 聚焦到目标单元格
                   cell.focus();
                   // 将光标定位到文本最开头
                   const range = document.createRange();
                   const sel = window.getSelection();
                   range.setStart(cell.childNodes[0], 0);
                   range.collapse(true);
                   sel.removeAllRanges();
                   sel.addRange(range);
               }
           </script>
      </body>
    </html>
   </xsl:template>

改动说明 #

• 给存放Greetings,的<td>标签添加了contenteditable="true"属性，让该元素支持输入状态、可以显示系统原生闪烁文本光标
• 给目标<td>设置了唯一id方便JS定位元素
• 新增页面加载完成自动执行的JS逻辑，自动给单元格聚焦并将光标移动到Greetings,文本的最前面，无需用户点击即可显示光标

效果参考 #

图1：原有点击后才显示光标的效果

图2：实现后的目标效果

内容的提问来源于stack exchange，提问作者KillMonger