如何计算输入 HTML 元素的宽度，使其与其内容的大小相匹配

How to calculate the width of an input HTML element so that it matches the size of its content?

本文关键字：计算 何计算 输入 元素 HTML      更新时间：2023-09-26

如何计算输入HTML元素的宽度，使其与其内容的大小相匹配？我已经在用户键入时动态更新了输入：

<input type='text' onkeydown='this.size=this.value.length' />

但是，这似乎并不完全正确，因为它没有考虑到某些字符比其他字符长的事实：

  • 如果我只输入一些"l"字符，我会得到越来越多的空格
  • 如果我只输入一些"w"字符，大小将不足

如何进行？

PS：我为什么要这样做（已经在已删除的答案中回答了这个问题）？我有一些句子，我必须用输入替换括号内容（例如：[用户] 是 [岁] 岁）。我不知道这句话可以是什么，所以我不知道输入的足够长度，我想让它保持在一行上可读（避免太多空格）。

您可以使用（隐藏的）画布和上下文的measureText()方法来获取字符串的宽度。

编辑：

看起来足够快。

首先，定义一些 CSS...

input,
#input-helper {
    display: inline;
    font-size: 14px;
    font-family: serif;
    line-height: 16px;
}
#input-helper {
    position: absolute;
    top: -10000px;
}

。然后使用一些JavaScript...

var div = document.createElement("div");
div.id = "input-helper";
document.body.appendChild(div);
var input = document.querySelector("input");
input.addEventListener("keyup", function() {
    div.textContent = this.value;
    input.style.width = div.offsetWidth + "px";
});​

jsFiddle。

您还需要为input元素选择合理的起始宽度。

如果使用jQuery不是问题，这里有一个我在jsFiddle上整理的演示。它使用一个 Autoexpand.js 文件来执行您想要的操作。看看小提琴中的最后一个例子。

一些细节：

  1. 它基于.keyup和.keypress，以实现最快的响应。
  2. 它考虑了粘贴到框中的 HTML 标记。处理换行符之类的事情。
  3. 源文件通过考虑有关字体的所有内容来显示智能处理。
jsFiddle

中还包括下载小提琴的粘贴版本的链接，因为jsFiddle Sandbox在IE8中中断。也就是说，它也适用于IE7！

首先：将此div 添加到您想要的位置 

<div id="calcsize" style="display:none;"></div>

第二：使用此功能

function getWidthof(txt)
{
    $('#calcsize').empty().append(txt);
    return $('#calcsize').width();
}
相关文章：