javascript - 如何获得 HTML 输入中文本的准确宽度？

Question

这个问题已经有答案了:

Calculating text width (22 个回答)

已关闭 6 年前。

所以，我有一个 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

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

当用户按“空格”转到另一个单词时，我多放了 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

希望对您有帮助!干杯