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

Question

我的目标是让 HTML 输入元素动态变化以适应它们的内容。我有一些工作得很好，请参阅 my jsfiddle example here .

我的问题是:您可以看到，当您在文本字段中键入许多字符时，宽度实际上总是比文本内容长一定百分比(或左右)。

看到输入框最后一个“j”右边的小空格了吗？我希望输入能恰好与文本值的末尾吻合。在输入中输入的文本值越长，问题就越严重。

我正在根据相邻 <span> 的宽度设置输入的宽度元素。任何人都知道为什么我得到的宽度实际上比输入中文本的宽度大一点？

更新

我使用下面的答案解决了这个问题，这里是一些使用 jQuery 的工作代码:http://jsfiddle.net/FwMBR/13/ .

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

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

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

    $('#a').css({
        'font-family':$(this).css('font-family'),
        'font-size':$(this).css('font-size')
    });

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

});

Answer 1

发生这种情况是因为您的测试跨度的字体与文本框的字体不同；因此字符宽度不匹配。你应该

• 将文本框的字体和字体大小设置为与测试跨度相同或
• 找到文本框字体和字体大小，并将它们设置为测试跨度。

后者看起来更好(保留原生文本框字体)，但更难实现，所以我写了 this code去做吧。

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