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

Question

我的目标是动态更改HTML输入元素以适应其内容。我的工作做得很好，请参阅my jsfiddle example here。

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

查看最后一个＆＃34; j＆＃34;右边的小空间。在输入字段中？我希望输入只是与文本值的结尾完全吻合。输入文本值的时间越长，问题就越严重。

我从相邻<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
});

Answer 2

http://jsfiddle.net/PeQXJ/

css：

.myinput , body
{
    font-family:"Times New Roman",Georgia,Serif; 
    font-size:14px;
}

HTML

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

JS：

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

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

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

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

});;

Answer 3

尝试

CSS：

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

 }

HTML：

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

这是 JSFIDDLE

Answer 4

使用它。这将按你的意愿工作

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

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

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

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

});;

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