具有灵活背景图像的Textarea，可通过文本输入调整大小

Question

我有一个textarea，其背景是手绘框。我希望背景图像的height与其中的文本一起拉伸。因此，当文本输入超出height的{​​{1}} / width时，而不是看到滚动条，图像（以及文本框本身）会调整大小以匹配完整高度文本。我假设可以通过为textarea CSS添加min-height: 200px / max-height:100%来修复此问题，但不知道如何正确实现它。

我正在使用的代码是：

textarea

    textarea{ 
        background: #FFF url(box.png) no-repeat 0px 0px;
        background-attachment:fixed;
        width: 605px;
        height: 200px;
        line-height:20px;
        padding:30px;
        text-indent:3px;
        margin:0;
        border: none;
    }

编辑：只是为了澄清，这不是我们将要使用的实际图像，设计师正在做一个更好的版本 - 只是我在油漆中拼凑的一个。

Answer 1

<div> contenteditable和display: inline-block;可以像没有代码那样运作，就像<textarea>一样。

演示：http://jsfiddle.net/ThinkingStiff/sau9r/

HTML：

<div contenteditable>expaning textarea</div>

CSS：

div {
    display: inline-block;
    background-image: url(http://i.stack.imgur.com/EiR9T.png);
    background-size: 100% 100%;
    background-repeat:no-repeat;
    min-height: 100px;
    min-width: 200px;
    outline: 0;
    padding: 30px 30px 40px 20px;
}

Answer 2

文本区域通常不会调整大小以匹配输入文本的高度，因此您需要使用js。有关执行此操作的方法，请参阅autosizing-textarea和implementing-a-resizable-textarea。还有jquery插件可用。

拉伸背景会特别困难，因为它是手绘的。

我建议创建一个带有顶部边框背景图片的<div>，然后是<textarea>，左侧和右侧背景图片可以垂直重复，然后添加带有底部边框背景图片的<div>。