Javascript 为什么设置输入宽度与内容不完全匹配？

我的目标是让HTML输入元素动态更改以适应其内容。我有些东西很管用，你看

我的问题是：您可以看到，当您在文本字段中键入许多字符时，宽度实际上总是比文本内容长一定百分比（大约）

看到输入字段中最后一个“j”右边的小空格了吗？我希望输入正好与文本值的结尾对齐。在输入中输入的文本值越长，问题就越严重

我正在根据相邻

元素的宽度设置输入的宽度。有人知道为什么我得到的宽度实际上比输入中文本的宽度大一点吗

更新

我用下面的答案解决了这个问题，下面是jQuery的一些工作代码：

$（'input'）.width（'10px'）.keyup（函数（）{
$（'a'）。删除（）；
$（this）.after（“”+$（this.val（）+“”）；
$（'#a'）.css({
'font-family'：$（this.css（'font-family'），
'font-size'：$（this.css（'font-size'））
});
$（this.width（$（'a'）.width（））；
});

使用此选项。这会像你想要的那样工作

$('input').width('10px').keydown(function(){

    $('#a').remove();

    $(this).after('<span id="a">'+$(this).val()+'</span>');

    $(this).width($('#a').width());

});;

$（'input'）.width（'10px'）.keydown（函数（）{
$（'a'）。删除（）；
$（this）.after（“”+$（this.val（）+“”）；
$（this.width（$（'a'）.width（））；
});;

---

**在字段和HTML页面中使用相同的字体。

使用此字体。这会像你想要的那样工作

$('input').width('10px').keydown(function(){

    $('#a').remove();

    $(this).after('<span id="a">'+$(this).val()+'</span>');

    $(this).width($('#a').width());

});;

$（'input'）.width（'10px'）.keydown（函数（）{
$（'a'）。删除（）；
$（this）.after（“”+$（this.val（）+“”）；
$（this.width（$（'a'）.width（））；
});;

---

**在字段和HTML页面中使用相同的字体。

这是因为测试范围的字体与文本框的字体不同；因此，字符宽度不匹配。你也应该

• 将文本框的字体和字体大小设置为与测试范围相同，或
• 找到文本框字体和字体大小，并将其设置为测试范围

后者看起来更好（保持本机文本框字体），但更难实现，所以我写了一篇文章

var computed = window.getComputedStyle($('input')[0]);
$('#a').css({
    'font-family': computed.fontFamily, 
    'font-size': computed.fontSize
});

---

这是因为测试范围的字体与文本框的字体不同；因此，字符宽度不匹配。你也应该

• 将文本框的字体和字体大小设置为与测试范围相同，或
• 找到文本框字体和字体大小，并将其设置为测试范围

后者看起来更好（保持本机文本框字体），但更难实现，所以我写了一篇文章

var computed = window.getComputedStyle($('input')[0]);
$('#a').css({
    'font-family': computed.fontFamily, 
    'font-size': computed.fontSize
});

css:

html

js:

$（'input'）.width（'10px'）.keyup（函数（）{
$（'a'）。删除（）；
$（this）.after（“”+$（this.val（）+“”）；
$（this.width（$（'a'）.width（））；
});;

css:

html

js:

$（'input'）.width（'10px'）.keyup（函数（）{
$（'a'）。删除（）；
$（this）.after（“”+$（this.val（）+“”）；
$（this.width（$（'a'）.width（））；
});;

试试看

CSS:

HTML:

 <input type="text" class="mytext">

这是

试试看

CSS:

HTML:

 <input type="text" class="mytext">

---

这是

的

span

和

输入

字体不同。你需要它们是一样的。此外，默认情况下（至少在Chrome中）输入框上有填充，

span

和

input

字体是不同的。你需要它们是一样的。此外，在默认情况下（至少在Chrome中），输入框上有填充物。它有什么不同，以及它在解决问题方面有什么不同？@AnoopJoshi您使用的浏览器。它在chrome中工作。@Pietu1998如果您连续按任意键，那么有问题的代码段将显示一些问题。我的代码刚刚解决了这个问题。@DeepakTiwari长时间按字符“f”。）它有什么不同？解决问题的方法有什么不同？@AnoopJoshi您使用的浏览器。它在chrome中工作。@Pietu1998如果您连续按任意键，那么有问题的代码段将显示一些问题。我的代码刚刚解决了这个问题。@DeepakTiwari长时间按字符“f”。）看起来这个问题仍然存在于您的fiddle示例中。我很确定这是因为字体不同。你试过用相同的字体输入和显示吗？看起来这个问题在你的小提琴示例中仍然存在。我很确定这是因为字体不同。你试过用同样的字体输入和显示吗？

.mytext {
    padding-right: 0px! important;

 }

 <input type="text" class="mytext">