單個字符的寬度是多少？

Question

我正在制作一個假輸入框，所以我可以應用像 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>

如何使光標與文本同步移動

Answer 1

一個簡單的解決方案是使用等寬字體，其中所有字符的寬度都相同。 一個例子是Courier New 。

然后你可以使用：

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

你可以在這里看到一個片段：

 <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>

Answer 2

這應該非常適合您，它匹配並且我修復了您在 CSS 中犯的錯誤（一個流浪的“y”）。 我只是匹配了字體並調整了輸入框內的填充以對齊。

    <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>