如何使之其内容的尺寸相匹配计算输入HTML元素的宽度？(How to calculate the w

如何使之其内容的尺寸相匹配计算输入HTML元素的宽度？ 我已经即时更新的用户类型的输入：

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

然而，这似乎并不完全正确，因为它没有考虑到一个事实，即一些字符比一般人长：

• 我会得到越来越多的空白，如果我只需键入一些“L”字符
• 规模将是不够的，如果我只键入一些“W”字

如何进行？

PS：为什么我要做到这一点（已被删除一个答案回答了这个）？ 我在我不得不更换通过输入托架内容的句子（例如：[用户]为[岁]左右）。 我不知道这句话可能是什么，所以我不知道该输入足够的长度，我想保持可读在同一行（避免过多的空格）。

Answer 1:

你可以使用一个（隐藏）画布和measureText()上下文的方法，让您的字符串的宽度。

编辑：

看起来不够快 。

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文件，你想要做什么。 退房的最后一个例子中的小提琴。

一些具体：

1. 它基于.keyup和.keypress最快响应可能的。
2. 它考虑到粘贴之成箱的HTML标记。 比如像换行符被处理。
3. 源文件通过采取有关字体考虑一切都显示智能处理。

还包括在被的jsfiddle链接下载小提琴的引擎收录的版本，因为在IE8的jsfiddle沙箱破裂。 这就是说，它也适用于IE7呢！

Answer 4:

第一：添加这个div你想要

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

第二：使用此功能

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

文章来源: How to calculate the width of an input HTML element so that it matches the size of its content?