0

I have an XSL Template. In table, before 'Greetings', I need to add a blinking text cursor. Currently, the cursor appears only on clicking. But, I need that cursor to appear by default before 'Greetings'.

enter image description here
Image 1

enter image description here
Image 2

I need that cursor to appear before 'Greetings' like image 2

 <xsl:template>
     <html>
          <body>
            <table style="padding: 0px; width: 100%;">
              <tr>
                <td>Greetings,</td>
              </tr>
           
            </table>
       </body>
     </html>
    </<xsl:template>
KillMonger
  • 29
  • 7
  • Unless you have editable content, I don't think a browser shows a blinking text caret/cursor. So you have to look into producing an editable element like a textarea and focus on it with JavaScript or an editable HTML element where you can also focus/set the selection with JavaScript. But all that is the same for plain HTML or XSLT generated HTML, so you just need to look into the HTML/JavaScript part. – Martin Honnen Sep 13 '21 at 14:44
  • @MartinHonnen My table is an editable content. If I click anywhere near greetings, the cursor appears and I am able to type. I just want the cursor to appear at the start by default. – KillMonger Sep 14 '21 at 06:45
  • As far as I know, you need JavaScript to set a caret in editable content of HTML in the browser so look at existing questions/answers like https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div – Martin Honnen Sep 14 '21 at 07:42

1 Answers1

0

If It is a table, I don't understand how upon clicking the cursor would be visible. Because It is not a input field sort of element, it's just a plain text. However, what you are asking for can be achieved with the custom css class. Add a span element with | just before the Greetings text, Like this:

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;
  }
}

Here is the codepen demo: https://codepen.io/Hitesh_Vadher/pen/xxrrQzR?editors=1100

light1
  • 184
  • 1
  • 15