0

ユースケースにテキストエリア自動拡張プラグインを適応させています

http://jsfiddle.net/hY73a/

変更点は、最初からシングルラインにすることと、兄弟のための余地を残すことです。

このように兄弟の幅を計算していますが、ご覧のとおり、両方の兄弟が収まらないため、何か間違ったことをしているに違いありません

var siblings = $self.siblings();
var siblingsWidth = 0;
for(var i = 0; i < siblings.length; i++) 
    siblingsWidth += $(siblings[i]).outerWidth();

そして、次のように max-width を設定します

$self.css({"max-width": $self.parent().innerWidth() - siblingsWidth });
4

1 に答える 1

0

これが発生する理由は、span要素がdisplay: inline要素であり、ブラウザーがテキスト ノードの場合と同様に要素の周りにスペースを配置するためです。これにより、これらのコンポーネントによって消費されるスペースの量は、それらの幅にコンポーネント間のスペースの量を加えたものになります。

spanこれを実証するために、HTML の要素間のスペースをすべて削除しました。

<div style="width: 200px; border: solid black 1px">
    <textarea></textarea><span>SibOne</span><span>SibTwo</span>
</div>

注意が必要なもう 1 つの領域は、元のコードがテキストエリアのボックス モデルの他のコンポーネント (マージン、ボーダー、パディングなど) によって使用される幅の量を考慮していないことです。

// Get the amount of horizontal space used up by the textarea margin, border, and padding
var selfUnfactoredWidth = parseInt($self.css('margin-left'), 10) 
    + parseInt($self.css('margin-right'), 10) 
    + parseInt($self.css('border-left-width'), 10) 
    + parseInt($self.css('border-right-width'), 10) 
    + parseInt($self.css('padding-left'), 10) 
    + parseInt($self.css('padding-right'), 10);

$self.css({
    "max-width": $self.parent().innerWidth() - selfUnfactoredWidth - siblingsWidth
});

デモ

または、デフォルトのCSS ボックス モデルbox-sizingを変更するために使用できます。

textarea { 
    resize: none;
    border: solid black 1px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

これを行うと、変更されたボックスモデルが処理するため、以前のボーダーとパディングの幅を省略することができます。

// Get the amount of horizontal space used up by the textarea margin, border, and padding
var selfUnfactoredWidth = parseInt($self.css('margin-left'), 10) 
    + parseInt($self.css('margin-right'), 10);

$self.css({
    "max-width": $self.parent().innerWidth() - selfUnfactoredWidth - siblingsWidth
});

デモ (使用box-sizing)

于 2013-03-27T20:01:07.570 に答える