8

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

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

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

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

如何进行？

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

4

4 回答 4

4

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

编辑：

看起来够快。

于 2012-05-31T12:43:12.447 回答
3

首先，定义一些 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";
});​

js小提琴。

你也需要为你的input元素选择一个合理的起始宽度。

于 2012-05-31T12:44:46.773 回答
2

如果使用 jQuery 没有问题，这里是我放在jsFiddle上的一个演示。它使用一个Autoexpand.js文件来做你想做的事。查看小提琴中的最后一个示例。

一些细节：

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

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

于 2012-06-02T07:35:52.020 回答
0

第一：在你想要的地方添加这个 div

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

第二：使用此功能

function getWidthof(txt)
{
    $('#calcsize').empty().append(txt);
    return $('#calcsize').width();
}
于 2016-07-30T07:04:34.293 回答