0

textarea高さと幅の両方を自動拡張する 、Firefox と Chrome の両方の jQuery プラグインを作成しようとしています。これが私がやったことです。

HTML:

<div class="textbox">
    <textarea>Some Text</textarea>
</div>

CSS:

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.textbox {
    position: absolute;
    border: 4px dashed #CCCCCC;
    min-width: 30px;
    padding: 8px;
}


.textbox textarea {
    background: transparent;
    padding: 0;
    margin: 0;
    resize: none;
    font-family: Arial, sans-serif;
    font-size: 60px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    white-space: nowrap;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

JS:

$(function() {
    $.fn.textbox = function(options) {
        options = options || {};

        var maxWidth = options.maxWidth || $(window).width(),
            maxHeight = options.maxHeight || $(window).height();

        this.each(function() {
            var elem = $(this),
                clone = $("<div class='hiddendiv'></div>").appendTo("body"),
                textarea = elem.find("textarea"),
                content = "";

            function setMaxSize() {
                var widthSpace = elem.outerWidth(true) - elem.width();
                var heightSpace = elem.outerHeight(true) - elem.height();
                var newMax = {
                    "max-width": maxWidth - widthSpace,
                    "max-height": maxHeight - heightSpace
                };

                elem.css(newMax);
                clone.css(newMax);
            }

            function adjust() {
                clone.css({
                    "font-family": textarea.css("font-family"),
                    "font-size": textarea.css("font-size")
                });

                content = textarea.val().replace(/\n/g, '<br>&nbsp;');
                if (content === "") {
                    content = "&nbsp;";
                }

                clone.html(content);

                elem.css({
                    height: clone.height(),
                    width: clone.width() + 5
                });
            }
            textarea.on("keyup", adjust);

            setMaxSize();
            adjust();

        });
    };

    $(".textbox").textbox();
});

いくつか問題があります:

  1. 文字を入力してボックスを展開するたびに、Firefox でのみ奇妙な点滅が発生します。どうすればその点滅を取り除くことができますか?
  2. Chrome で文字を入力すると、最初の文字が後方に移動してから元の位置に戻ります。どうすればこれを防ぐことができますか?
  3. Chrome では、「Sdfsdfsdfwejhrkjsdhfsdf」などの長い単語を入力するたびに、最大幅に達してもテキストは改行されませんが、改行が表示されます。この動作を修正するにはどうすればよいですか?
4

1 に答える 1

0

.textbox要素でcssトランジションを使用できます。つまり、次のようになります。transition: all 0.5s;

于 2012-12-11T16:47:23.033 に答える