如何获得HTML输入内文本的准确宽度？

Question

所以，我有一个input，我希望它调整它的内容width。现在，我用这样的代码：

var adjustWidthToContent = function() 
 
{ 
 
\t var inputLength = $(this).val().length; 
 
\t // the minimum 1em width allows to start typing when the input is empty 
 
\t $(this).width(Math.max(1, inputLength*0.7) + "em"); 
 
}; 
 
$("input").on("input",adjustWidthToContent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type='text' />

该工程确定为桌面，但我想使这个更准确的（0.7系数是“哈克”之一，计算实际宽度的那个对于不同的符号明显不同）。尝试输入多个符号：您会发现差距在增大。解决这个问题对于移动界面特别有用，我不希望任何额外的空间被input元素的空白部分占据。

显然，我需要使用与inputLength不同的东西。我如何获得input中文本的“实际”宽度？

---

PS这里是我使用的基础上，建议：

$.fn.textWidth = function() { 
 
\t if (!$.fn.textWidth.fakeEl) 
 
\t \t $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
 
\t $.fn.textWidth.fakeEl.text(this.val() || this.text()).css('font', this.css('font')); 
 
\t return $.fn.textWidth.fakeEl.width(); 
 
}; 
 
var adjustWidthToContent = function() 
 
{ 
 
\t var textWidth = jQuery(this).textWidth(); 
 
\t var defaultWidth = 20; 
 
\t $(this).width((textWidth || defaultWidth) + 'px'); 
 
}; 
 
$("input").on("input",adjustWidthToContent).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type='text' />

PPS这确实需要一些阐述了adjustWidthToContent是适用的有这么几种文本字段，虽然。

Answer 1

解决方法是创建一个假跨度，将输入的文本放入其中，获取此跨度的大小并应用于您的输入框。

我把7px的空间放在“”当用户按“空格”转到另一个单词时输入不会受到影响。

我还定义了如果里面什么都没有，输入的默认大小将是50px。

的Html

<input id="my-input" type='text' /> 

JS

$.fn.textWidth = function (text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

$('#my-input').on('input', function() { 
    var textWidth = $(this).textWidth(); 
    var defaultValue = 50; 
    $('#' + this.id).width((textWidth == 0 ? defaultValue : textWidth + 7) + 'px'); 
}).trigger('input'); 

我这样做下面这个职位的答案之一：Calculating text width

希望它可以帮助你！干杯