自动调整textarea宽度（cols）？

Question

我正在为用户创建一个Web应用程序以创建一个简单的orgchart。 我什至没有连接节点的线，但是我正在使用文本区域。 我发现了一个非常有用的autosize（）插件，非常适合在占用宽度时添加额外的行。 有没有办法做到这一点，如果用户只使用一行，自动调整大小将缩小宽度以环绕文本？

我试图弄清楚如何执行jsfiddle，但我不知道如何添加多个JavaScript（用于插件），所以我只是将我的jquery代码放在插件的底部，然后将插件放入在jsfiddle的javascript区域中

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathway Builder 2.0</title>
    <link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script src="PathwayBuilder2.js" type="text/javascript"></script>
    <script src="plug-ins/autosize.js" type="text/javascript"></script>
</head>




<body>
    <div id="Pathway">
        <div class="whole">
            <div class="text_display">
                <textarea class="text_field_not_selected"></textarea><br />
                <input type="button" class="add_child" value="+" />
            </div>
        </div>
    </div>
</body>
</html>

使用Javascript / jQuery的

$(document).ready(function() {
    $('textarea').autosize();
});

$(document).ready(function() {
    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});

$('textarea').live('focusin blur', function() {
    $(this).toggleClass('text_field_not_selected');
});

CSS

body {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#pathway {
    display: block;
}
.whole {
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
textarea {
    min-width: 2em;
    text-align: center;
}
textarea:focus {
    resize: none;
}
.text_field_not_selected {
    resize: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 3px 5px #444;
    -moz-box-shadow: 0px 3px 5px #444;
    -webkit-box-shadow: 0px 3px 5px #444;
}
.add_child {
    margin-bottom: 25px;
}

Answer 1

在这里，您可以进行工作演示 ： http : //jsfiddle.net/YVEhr/30/ （更易于理解）或 http://jsfiddle.net/YVEhr/1/

请告诉我您是否想要的，我很乐意提供帮助。 花了我一点时间（即调整大小的想法）:)

编辑 Okies，我现在明白了（Phew），请随时使用CSS，或者您可以从'row = something'开始，我分享了一些链接以获取进一步的帮助。 :)

演示 http://jsfiddle.net/YVEhr/30/

调整文本区域的大小以适合屏幕：很好的链接：或者您也可以调查这个人： http : //archive.plugins.jquery.com/project/TextFill

jQuery代码

//inital resize
resizeTextArea($('textarea'));

//resize text area
function resizeTextArea(elem){
   // alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight);
    elem.height(1); 
    elem.scrollTop(0);
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height());
}

//'live' event
$('textarea').live('keyup', function() {
    var elem = $(this);
   // alert('foo');
    //bind scroll
    if(!elem.data('has-scroll'))
    {
        elem.data('has-scroll', true);
        elem.bind('scroll keyup', function(){
            resizeTextArea($(this));
        });
    }

    resizeTextArea($(this));
});

请让我知道您是否想要的。

说明

只需要将新的etxtareaclass绑定到.autosize()函数即可，其余的您可以在jsfiddle中看到。

别忘了接受答案，如果您愿意，可以在不使用任何插件的情况下使用此解决方案： jQuery-构建不会在调整大小时闪烁的AutoResizing TextArea

希望这一切有用的人，希望能对您有所帮助，并为他们加油！

jQuery代码

$(document).ready(function() {

    $('.add_child').live({
        click: function() {
            var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>';
            $(this).closest('.whole').append(new_child);
            $('.text_field_not_selected').autosize();
        }
    });
});

自动调整textarea宽度（cols）？

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-04-12 04:18:02

自动调整textarea宽度（cols）？

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-04-12 04:18:02

解决方案1
4 已采纳 2012-04-12 04:18:02