入力HTML要素の幅をコンテンツのサイズと一致するように計算するにはどうすればよいですか？ 私はすでに、ユーザーの種類として、オンザフライでの入力を更新：入力HTML要素の幅をコンテンツのサイズと一致するように計算する方法は？
<input type='text' onkeydown='this.size=this.value.length' />
しかし、これは完全に正しいいないようです私は唯一のいくつかの「w」の文字を入力するとサイズが不十分になります
どのように進めますか？
PS：どうして私はこれをしたいのですか（これはすでに回答が削除されています） 私は、ブラケットの内容を入力（例えば、[ユーザー]は[年]古いもの）で置き換える必要がある文章を持っています。文の内容が分からないので、入力には十分な長さが分からず、1行で読みやすく（空白があまりにも多くないように）したいと思います。
まず、いくつかの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";
});
input要素についても、適切な開始幅を選択することをお勧めします。
大丈夫、賢い。しかし、これが十分に速いかどうかは不明です。 onkeyupは1秒でかなりの時間がかかります。テストします。 –
+1優れた使用方法を作成します。私の好みでは、 "px"を '+ 15 +" px "'に変更することで、テキストはより跳躍します（http://jsfiddle.net/Y5vAe/1/）。私が提供した答えは過度かもしれませんが、2kbのソースファイルも '.offsetWidth'に基づいています。乾杯！ – arttronics
jQueryを使用しても問題がない場合は、jsFiddleにまとめたデモがあります。それはあなたが望むことを行うAutoexpand.jsファイルを使用します。フィドルの最後の例を見てください。
一部仕様：
.keyupと.keypressに基づいています。また、jsFiddleサンドボックスがIE8で破損しているので、フィドルのペーストビンバージョンをダウンロードするリンクがjsFiddleに含まれています。それは、それはまたIE7でも動作すると言いました！
私の場合、JQueryは使用できません。 anyawyありがとう、他の人には役に立ちます。 –
まず：これはあなたが
<div id="calcsize" style="display:none;"></div>
はセカンドたい場所DIV追加：この機能を使用
function getWidthof(txt)
{
$('#calcsize').empty().append(txt);
return $('#calcsize').width();
}
は、なぜあなたは最初の場所でこれをしたいですか？おそらく簡単な回避策があります –
onkeydownはマウスクリックで貼り付けをキャッチしません。 –
@Pekka Question edited。上記を参照。 –