Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

196
Vistas
What is the width of a single character?

I am making a fake input box so I can apply a vintage style text cursor like cmd _.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function copy(val){
$(".copy").html(val);
$(".vintage").css("left",val.length*1.5+"ch");}
function enterCmd(e){
if(event.keyCode==13){
$('.cmdBox').val("");
copy($('.cmdBox').val());}}
</script>
   <!--So as the length of the string increases the cursor should move back and forth respectively.

   But it starts out accurately and then drifts away-->

<div class="cmdBoxy" >&gt;<span class="copy" ></span>
   <div class="vintage blink"></div>
</div>
   <input type="text" class="cmdBox" oninput="copy($('.cmdBox').val());" id="lp" onkeydown="enterCmd($('.cmdBox'))">

<style>
.vintage{
position:relative;
background-color:white;
height:25%;
width:2%;
left:1.5%;
font-size:1em;}
.cmdBoxy{
 position:relative;
top:1rem;
background-color:red;
height:1.5rem;
width:99%;}
</style>

How do I make it so that the cursor moves in sync with the text

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

A simple solution would be to use a monospace font, where the width of all characters is the same. An example would be Courier New.

Then you can just use:

$(".vintage").css("left",val.length*1+"ch");}

You can see a snippet here:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function copy(val){
$(".copy").html(val);
$(".vintage").css("left",val.length*1+"ch");}
function enterCmd(e){
if(event.keyCode==13){
$('.cmdBox').val("");
copy($('.cmdBox').val());}}
</script>
   <!--So as the length of the string increases the cursor should move back and forth respectively.

   But it starts out accurately and then drifts away-->

<div class="cmdBoxy" >&gt;<span class="copy" ></span>
   <div class="vintage blink"></div>
</div>
   <input type="text" class="cmdBox" oninput="copy($('.cmdBox').val());" id="lp" onkeydown="enterCmd($('.cmdBox'))">

<style>
* {
font-family: 'Courier New';
}
.vintage{
position:relative;
background-color:white;
height:25%;
width:2%;
left:1.5%;
font-size:1em;}
.cmdBoxy{
 position:relative;
top:1rem;
background-color:red;
height:1.5rem;
width:99%;}
</style>

about 4 years ago · Juan Pablo Isaza Denunciar

0

This should work perfectly for you, It matches up and I fixed an error you made in the CSS (a stray "y"). I just matched up the fonts and adjusted the padding inside the input box to line up.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
   function copy(val){
    $(".copy").html(val);
    $(".vintage").css("left",val.length*1.5+"ch");
}
function enterCmd(e){
    if(event.keyCode==13) {
        $('.cmdBox').val("");
        copy($('.cmdBox').val());
    }
}
    </script>
   <!--So as the length of the string increases the cursor should move back and forth respectively.

   But it starts out accurately and then drifts away-->

<div class="cmdBoxy" >&gt;<span class="copy" ></span>
   <div class="vintage blink"></div>
</div>
   <input type="text" class="cmdBox" oninput="copy($('.cmdBox').val());" id="lp" onkeydown="enterCmd($('.cmdBox'))">
    <style>
   .vintage{
  position:relative;
  background-color:white;
  height:25%;
  width:2%;
  left:1.5%;
  font-size:1em;
  margin: 0px 10px;
}
.cmdBox{
  position:relative;
  top:1rem;
  background-color:red;
  font-size:1em;
  height:1.5rem;
  width:99%;
  margin: 0;
  padding: 0px 8px;
}

.copy {
  font-size:1em;
  font-family: sans-serif;
}
    </style>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda