3

私は何をしたいですか？

のように機能する div が必要です。divtextarea内のものを編集したり、画像などをプレーンテキストだけに貼り付けたりする機能は必要ありません。

例

www.facebook.com - 最良の例は、 facebook のニュースフィードです。

なぜこの方法が必要なのですか？

フェイスブックのニュースフィードをチェックしてみると、投稿を書いたり、エントリーをたくさんしたりすればするほど、投稿できる範囲が広がっていくのがわかります。

これは、textarea ではそれができないため、contentEditable で div を使用したいのと同じ理由です。#

JQUERYのみのJAVASCRIPTは使用しないでください

4

4 に答える 4

3

フレームワークなしで純粋な JavaScript を使用したサイズ変更可能なテキストエリア:

<html>
    <head>
        <script>
            function taOnInput()
            {
                var dis = this;
                setTimeout(
                    function(){
                        var span = document.createElement("div");
                        span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n
                        span.style.width = dis.offsetWidth+"px";
                        span.style.padding = "0px";
                        span.style.fontFamily = "Lucida Console";
                        document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack
                        dis.style.height = span.offsetHeight+"px";
                        document.body.removeChild(span);
                    }, 1
                ); //setTimeout=hack, since oKP is called BEFORE character append.  
            }
            window.onload = function()
            {
                var resizableTA = document.getElementById("resizableTA");
                resizableTA.onkeypress = taOnInput;
            }
        </script>
        <title>ItzWarty - Untitled Document</title>
    </head>
    <body>
        <textarea id="resizableTA">Trololololol</textarea>
    </body>
</html>

非常にハックです。10 分以内にまとめてください。うまくいけば、少なくともアイデアが得られるでしょう。

Google Chrome 5.0.308.0 でのみテスト済み

コードの説明、コメントに失敗したので
1) window.onload の前に、id "resizableTA" の textarea を作成し、DOM ツリーの document.body に追加しました。
2) window.onload は、イベント ハンドラー taOnInput [入力時のテキスト領域] をアタッチします。
3）入力のテキストエリアはダミースパンを作成し、その幅をテキストエリアの幅に強制し、フォントスタイルを「ルシダコンソール」に強制します。これは、AFAIKがテキストエリアのデフォルトフォントであり、テキストエリアの値をスパンのinnerHTMLにコピーします。 %0A [テキストエリアが使用する改行] with
[改行]...
4) スパンの offsetHeight はスパンの高さであり、テキストエリアの高さを強制するために使用できるようになりました。

Lucida Console が textarea のデフォルトのフォントであることを確認できる人はいますか? コンソラか？クーリエ 新しい？固定幅フォントなら何でも使えると思っていました。私は Mac を使用していないので、どのフォントが Windows と共有されているかはわかりませんが、Courier New の方が適していると思います...

于 2010-07-27T08:16:09.167 に答える
0

テキストエリア要素はどうですか？

お好みのスタイルにスタイリングできます。

于 2010-07-27T05:59:08.513 に答える
0

拡張だけが必要な場合は、これを試すことができます。

于 2010-07-27T06:10:23.017 に答える
0

DIV を使用する必要はありません。テキストエリアを保持し、必要に応じて拡張することができます。

これはまさにそれを行うjQueryプラグインです：http://plugins.jquery.com/project/TextAreaResizer

ここにデモがあります: http://www.itsavesyou.com/TextArea_Resizer_example.htm

于 2010-07-27T06:28:07.970 に答える