如何在 HTML 输入中获得准确的文本宽度？ [复制]

Question

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

var adjustWidthToContent = function()
{
	var inputLength = $(this).val().length;
	// the minimum 1em width allows to start typing when the input is empty
	$(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 系数是一个“hacky”系数，计算实际宽度的系数对于不同的符号显然不同）。尝试键入多个符号：您会发现差距越来越大。修复这对于我不希望任何额外空间被input 元素的空白部分占用的移动界面特别有用。

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

---

PS 这是我根据建议使用的：

$.fn.textWidth = function () {
	if (!$.fn.textWidth.fakeEl)
		$.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
	$.fn.textWidth.fakeEl.text(this.val() || this.text()).css('font', this.css('font'));
	return $.fn.textWidth.fakeEl.width();
};
var adjustWidthToContent = function()
{
	var textWidth = jQuery(this).textWidth();
	var defaultWidth = 20;
	$(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

解决办法是创建一个假的span，把输入的文本放在里面，得到这个span的大小，然后应用到你的输入框。

当用户按“空格”转到另一个单词并且输入不会受到影响时，我多放了 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

希望对你有帮助！干杯