How to move a cursor as user type?

Question

I’m creating a web game where a user types a code in HTML and the result is shown beside. I want to change the cursor that appears in the text area or make it look like a rectangle (like the Linux terminal) and I couldn’t make it work. The following screen shows what I want:

On the screen appears the cursor and it needs to move when the user type something in the text area. I would like to know how to do this in Angularjs or Javascript. I imagine it would be interesting to make the text input be small with the cursor on the right and then, as the user type, the input size increases to the right taking the course along.

Answer 1

Hello @Matthew Welcome to Stackoverflow ;)
Your 'problem' can be solved in a very simple way with css and the javascript used only to pick up the value of the input:

$(function() {

    $(".command").on("keyup", function() {
  
        $(".wrap-command").text($(this).val());
  
    });

})

.wrap-command {
  background: #000;
  width: 100%;
  min-height: 2rem;
  color: #21f838;
  font-size:1.5rem;
  font-family: courier;
  padding:.2rem;
  cursor: text;
}
.wrap-command:after {
  content: '';
  width: 5px;
  height: 1.5rem;
  display: inline-block;
  background: #21f838;
  animation: piscar 1s step-start infinite;
}
input.command {
  opacity: 0;
  position: fixed;
  top: -100px;
  left: 0;
}

@keyframes piscar {
50% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<label>
  <input type="text" class="command" />
  <div class="wrap-command"></div>
</label>

Remember that the less you use the Jquery for these effects faster will be your application and less subject to errors, whenever you can search for an alternative in css can do a lot of cool things.

Answer 2

Hello it is possible to do through CSS, in the element you need put the following CSS

cursor: none;

In case you need to add in everything.

*{
   cursor: none;
}

Answer 3

I found this solution by taking a look at the SOEN.

See if it suits your scenario.

$(function() {
  var cursor;
  $('#cmd').click(function() {
    $('input').focus();
    cursor = window.setInterval(function() {
      if ($('#cursor').css('visibility') === 'visible') {
        $('#cursor').css({
          visibility: 'hidden'
        });
      } else {
        $('#cursor').css({
          visibility: 'visible'
        });
      }
    }, 500);

  });

  $('input').keyup(function() {
    $('#cmd span').text($(this).val());
  });

  $('input').blur(function() {
    clearInterval(cursor);
    $('#cursor').css({
      visibility: 'visible'
    });
  });
});

#cmd {
  font-family: courier;
  font-size: 14px;
  background: black;
  color: #21f838;
  padding: 5px;
  overflow: hidden;
}
#cmd span {
  float: left;
  padding-left: 3px;
  white-space: pre;
}
#cursor {
  float: left;
  width: 5px;
  height: 14px;
  background: #21f838;
}
input {
  width: 0;
  height: 0;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmd">
  <span></span>
  <div id="cursor"></div>
</div>

<input type="text" name="command" value="" />

source: https://stackoverflow.com/a/3758063/7437072