Question

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

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

然而，这似乎并不完全正确，因为它没有考虑到某些角色比其他角色更长的事实：

如果我只输入一些“l”字符，我会得到越来越多的空白
如果我只键入一些“w”字符，则大小不足

如何进行？

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

Answer 1

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

修改

查看fast enough。

Answer 2

首先，定义一些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元素选择合理的起始宽度。

Answer 3

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

一些细节：

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

jsFiddle中还包含了自IE4中jsFiddle Sandbox中断以来下载小提琴版本的链接的链接。也就是说，它也适用于IE7！

Answer 4

首先：将此div添加到您想要的地方

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

第二名：使用此功能

function getWidthof(txt)
{
    $('#calcsize').empty().append(txt);
    return $('#calcsize').width();
}

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

4 个答案: