单个字符的宽度是多少?

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>