3

Estou criando um jogo web onde um usuário digita um código em HTML e o resultado é mostrado ao lado. Estou querendo alterar o cursor que aparece na área de texto ou fazer parecer que é um retângulo (como o terminal do Linux) e não consegui fazer funcionar. A tela à seguir mostra o que quero:

inserir a descrição da imagem aqui

Na tela aparece o cursor e ele precisa se mover quando o usuário digitar algo na área de texto. Gostaria de saber como fazer isso em AngularJS ou JavaScript. Imagino que seria interessante fazer a entrada de texto ser pequena com o cursor à direita e, então, conforme o usuário digita, o input aumenta de tamanho para a direita levando o curso junto.

3 Respostas 3

1

Olá @Mateus seja bem vindo ao StackOverflow ;)
Seu 'problema' pode ser resolvido de um forma bem simples com css e o javascript usado apenas para pegar o valor do 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>

Lembre-se que quanto menos usar o Jquery para esses efeitos mais rapido ficara sua aplicação e menos sujeita a erros, sempre que puder busque uma alternativa em css dá pra fazer muita coisa legal.

-1

Olá é possível fazer através do CSS, no elemento que você precisar coloca o seguinte CSS

cursor: none;

Caso precise adicionar em tudo.

*{
   cursor: none;
}
1
  • Isso só vai fazer o cursor sumir! E como vc vai colocar o cursos customizado igual ao do terminal como ele falou? E como vc vai fazer esse cursos caminhar junto com o texto enquanto ele digita?
    – hugocsl
    Commented 7/02/2019 às 13:13
-1

Encontrei essa solução dando uma olhada no SOEN.

Veja se atende seu cenário.

$(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="" />

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

1
  • Realmente funcionou. Obrigado. Outra coisa: nesse jogo eu tenho vários níveis, mas depois de apertar o botão "Próximo" e mudar de nível o conteúdo que ficou salvo no span permanece. O botão próximo apenas carrega um conteúdo novo para a página (dando binding com AngularJS) e eu preciso, ao mudar de nível, tirar o conteúdo do span. Como faço isso? Commented 7/02/2019 às 16:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .