What is the width of a single character?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>