一个字符的宽度是多少？

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>

如何使光标与文本同步移动

- User not found

---

为什么不改成 contenteditable 呢？ - Sebastian Simon

单个字符没有固定的宽度，因为它们在不同的字体中会有所不同。最接近的是在等宽字体中使用 1ch。 - Paulie_D

话虽如此，看起来一个类似于“cmd”的程序确实会使用等宽字体。 - Paulie_D

@Dumdum 考虑并排的两个元素: <span class="cmdInput">一些文本</span><span class="caret">_</span>。插入符号恰好在CMD输入框之后，无需进行宽度计算。如果在这种情况下正确实现了contenteditable，那么这就是你所需要的全部。 - Sebastian Simon

@SebastianSimon 好的，这只是将 div 向下推 <div><span contenteditable="true">这里输入文本</span><div style="height:20px;width:20px;background-color:red;"></div></div> 为什么当接收输入的 span 标签增大时它就无法工作了呢？ - User not found

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>

- clod9353

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>

- bee