0

我正在为我的用例调整一个 textarea 自动增长插件

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>

另一个需要注意的地方是原始代码没有考虑到文本区域框模型的其他组件（例如，边距、边框、填充）所用的宽度量。

// 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
});

演示

或者，您可以使用box-sizing修改默认CSS 框模型。

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 回答