How to move blinking element after javascript result?-CodePudding

I'm trying to move my blinking element directly to end of the result in the same line. But my blinking cursor still shows under my javascript result and I can't put it on the end of the result.

I tried: flex, float left, display: inbolcks and even margin div into div, but id didn't help. How can I do it? I will be really glad for help!

function myFunction() 
{
    result.innerHTML  = "I will not make any more boring art ";
    
}

body
{
    background-color:white;
    font-family: Lucida Console Regular;
    font-size:15px;
    color:black;
    border-width:0px;
    border: 0;
}
input {
  font-size:15px;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: hidden;
  background-color: white;
  font-family: Lucida Console Regular;
  color: transparent;
      display: inline-block;

}

result{
        display: flex;
    
}

.no-outline:focus {
  outline: none;
}

textarea:focus, input:focus{
               outline: none;
                
            }

.cursor {
    position: relative;
    float:left;
    flex:1;

}
.cursor i {
    flex:1;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: black;
    animation-name: blink;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    opacity: 1;

    
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0; }
}

<input  type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >

<div id="result"></div>

<div >
<input type="text"  /><i></i></div>

CodePudding user response：

You could just make use of the ::after selector to create the blinking cursor. That way it will always sit after the last character, like so:

function myFunction() {
  result.innerHTML  = "I will not make any more boring art ";  
}

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Orbitron:wght@400;500&family=Play&display=swap');

body {
  font-family: 'Inconsolata', monospace;
  font-size:15px;
}

input {
  border: hidden;
  background-color: white;
  color: transparent;
}

#result::after {
  content: '';
  border-right: 1px solid black;
  height: 100%;
  animation-name: blink;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
}

textarea:focus, input:focus {
  outline: none;                
}

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0; }
}

<input  type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >

<div id="result"></div>

<div >
  <input type="text"  /><i></i>
</div>