jquery - div 的宽度和高度随着 textarea 内容的增加而增加

Question

div 随着输入的文本而增加。美好的。但是当我按下回车键时，高度应该根据文本大小增加，宽度也不应该增加，直到文本达到上述宽度。请帮忙

http://jsfiddle.net/shabbirrangwala/NkRYY/8/

$('textarea').keyup(function(e) {
    if ((e.keyCode || e.which) == 13) {
        $('.EDetailInset').css('height', ((this.value.length + 1) * 3) + 'px');
    }
    else {
        $('.EDetailInset').css('width', ((this.value.length + 1) * 11) + 'px');
    }
});​ 

Answer 1

让我知道它是否按预期工作。不知何故，你需要保持宽度不变

var tWidth = $('textarea')[0].value.length;
var vWidth = 0;
var hIncr = 2; //initial line count - looks somehow?
var iheight = $('.EDetailInset').css('height').replace('px',''); //default height to height of box
$('textarea').keyup(function(e) {



if ((e.keyCode || e.which) == 13) {
$('.EDetailInset').css('height', (hIncr * iheight) + 'px'); //increase height by one line
  vWidth = 0; //so that the width does not increase
  hIncr++; //increase line number
}
else 
{

    vWidth = (vWidth+1);  //only this increase and reset to zero for new line
    if(vWidth*11 > tWidth) //if more characters than we had, increase box width
        tWidth = vWidth*11;
    console.log((vWidth*11)+':'+tWidth);

$('.EDetailInset').css('width', (tWidth) + 'px'); //no increment, width is static

}
});​

检查这个 JS Fiddle

Answer 2

虽然远非完美，但这是我的尝试：http: //jsfiddle.net/V6BSY/2/

我只是试图解决水平缩放的问题，因为很多其他人已经展示了垂直缩放是如何完成的。

这也减少了使用退格键时容器的大小。

HTML：

<div id="txt">
    <textarea></textarea>
</div>

CSS：

#txt {
    background-color: rgba(208,228,254,0.3);
    border: 2px dashed #000000;   
    height: 20px;
    padding: 5px;
}

#txt textarea {
    border: none;
    background: none;
    resize: none;
    outline: none;
    overflow: hidden;
    width: 10px;
    height: 15px;
    font-size: 10px;
}
​

JavaScript：

$(document).ready(function() {
    $("#txt").css("width", $("#txt textarea").css("width"));
});

$('textarea').keydown(function(e) {

    lines = $('#txt textarea').val().split('\n');
    maxLength = getLengthOfLongestLine(lines);

    var h = parseInt($(this).get(0).scrollHeight) + 5;
    var w = maxLength * parseInt($(this).css('font-size'));

    if ((e.keyCode || e.which) == 13) {
        $("#txt").css("height", h);
        $(this).css("height", h);        
    } else {
        $("#txt").css("width", w);
        $(this).css("width", w);        
    }

});

function getLengthOfLongestLine(arrLines) {        
    var maxLength = 0;
    for(var line in arrLines) {
        if (arrLines[line].length > maxLength) {
            maxLength = arrLines[line].length;
        }
    }
    return maxLength;                          
}
​

Answer 3

试试这个：http: //jsfiddle.net/NkRYY/62/

// HTML
<div id="EDetail" class="EDetail EDetailText">
    <div class="EDetailInset" >
        <span style="font-size: 17px;">

        </span>
        <textarea></textarea>
    </div>
</div>

// CSS
.EDetail, .EDetailDisabled {

    font-size: 20px;
    overflow: visible;    
    position: absolute;
}

.EDetail {
    border-radius: 3px 3px 3px 3px;

}

.EDetailInset {
    background-color: rgba(217,247,217,0.3);
    font-size: 20px;
    height : 22px;
    padding: 5px;
    background-color: rgba(208,228,254,0.3);
    border: 2px dashed #000000;

    position: absolute;
    cursor: move;
    min-width:100px;

}





.EDetailText textarea, .EDetailText span {
    font: 100%/1.1 arial,sans-serif;
    position: absolute;
    white-space: pre;
   padding: 5px;
}
.EDetailText textarea, .EDetailText textarea[disabled] {

    background: none repeat scroll 0 center transparent;
    border: 0 none;
    bottom: 6px;
    box-shadow: none;
    color: #000000;
    display: block;
    height: 90%;
    left: 0px;
    line-height: 1.1;
    outline: 0 none;
    padding: 5px;
    resize: none;
    right: 6px;
    top: 0px;
    transition: none 0s ease 0s;
    width: 90%;
    overflow:auto;
}

//JS
$('textarea').keyup(function(e) {


    if ((e.keyCode || e.which) == 13) {
    $('.EDetailInset').css('height', ((this.value.length + 10) * 3) + 'px');

    }
    //else
    //{
    //$('.EDetailInset').css('width', ((this.value.length + 10) * 11) + 'px');
    //}
    });

它达到的极限宽度是多少？