8

コンテンツのサイズと一致するように入力HTML要素の幅を計算するにはどうすればよいですか？ユーザーが入力すると、その場で入力を更新しました。

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

ただし、一部の文字が他の文字よりも長いという事実を考慮していないため、これは完全には正しくないようです。

  • 「l」文字だけを入力すると、空白がどんどん増えていきます
  • 「w」文字だけを入力するとサイズが不十分になります

どうやって進める？

PS：なぜ私はこれをしたいのですか（削除された回答ですでにこれに回答しています）？角かっこ内容を入力に置き換えなければならない文があります（例：[ユーザー]は[年]歳です）。文章が何であるかわからないので、入力の適切な長さがわかりません。1行で読みやすくしたいと思います（空白が多すぎないようにします）。

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";
});​

jsFiddle .

要素の適切な開始幅も選択する必要がありますinput。

于 2012-05-31T12:44:46.773 に答える
2

jQuery の使用に問題がない場合は、私がjsFiddleにまとめたデモを次に示します。それはAutoexpand.jsあなたが望むことをするファイルを使用します。フィドルの最後の例を確認してください。

いくつかの詳細：

  1. これは、可能な限り最速の応答に基づいてい.keyupます。.keypress
  2. ボックスに貼り付けられた HTML マークアップが考慮されます。改行のようなものは扱われます。
  3. ソースファイルは、フォントに関するすべてを考慮したスマートな処理を示しています。

また、jsFiddle には、jsFiddle サンドボックスが IE8 で壊れるため、フィドルのペーストビン バージョンをダウンロードするためのリンクが含まれています。とはいえ、IE7 でも動作します。

于 2012-06-02T07:35:52.020 に答える