Question

以下是我的代码的一小部分，列出了不同的输入字段。描述是256个字符，我希望有2-3行而不是1，宽度大约是两倍。我已经深入研究了bootstrap的css，并且只能找到如何移动输入框本身，而不是扩展textarea。有谁知道如何在bootstrap中的表单输入字段中扩展textarea？

<div class="control-group <?php echo !empty($descriptionError)?'error':'';?>">
    <label class="control-label">Description</label>
    <div class="controls">
        <input "name="description" type="text" placeholder="Description" value="<?php echo !empty($description)?$description:'';?>">
        <?php if (!empty($descriptionError)): ?>
            <span class="help-inline"><?php echo $descriptionError;?></span>
        <?php endif;?>
    </div>
</div>

Bootstrap信息：

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

使用textarea，更改列和行，或宽度不起作用

Answer 1

您可以使用一些jQuery来调整页面加载的大小。将输入更改为textarea并检查以下小提琴......不是我的代码...

http://jsfiddle.net/SpYk3/m8Qk9/

(function($) {
$.fn.autogrow = function() {
    return this.each(function() {
        var textarea = this;
        $.fn.autogrow.resize(textarea);
        $(textarea).focus(function() {
            textarea.interval = setInterval(function() {
                $.fn.autogrow.resize(textarea);
            }, 500);
        }).blur(function() {
            clearInterval(textarea.interval);
        });
    });
};
$.fn.autogrow.resize = function(textarea) {
    var lineHeight = parseInt($(textarea).css('line-height'), 10);
    var lines = textarea.value.split('\n');
    var columns = textarea.cols;
    var lineCount = 0;
    $.each(lines, function() {
        lineCount += Math.ceil(this.length / columns) || 1;
    });
    var height = lineHeight * (lineCount + 1);
    $(textarea).css('height', height);
};

}）（jQuery的）;

$（＆＃39;＃测试＆＃39）自动增长（）;

Bootstrap输入Textarea行大小

1 个答案: