Estoy creando un cuadro de entrada falso para poder aplicar un cursor de texto de estilo antiguo como 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" >><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>¿Cómo hago para que el cursor se mueva sincronizado con el texto?
Una solución simple sería usar una fuente monoespaciada, donde el ancho de todos los caracteres es el mismo. Un ejemplo sería Courier New .
Entonces solo puedes usar:
$(".vintage").css("left",val.length*1+"ch");}Puedes ver un fragmento aquí:
<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" >><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>Esto debería funcionar perfectamente para usted, coincide y solucioné un error que cometió en el CSS (una "y" perdida). Acabo de hacer coincidir las fuentes y ajusté el relleno dentro del cuadro de entrada para alinearlo.
<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" >><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>