0

我有一段代码可以让我输入 textarea。我在按键上增加了 textarea 的宽度，并且我给了宽度一个限制，之后它应该停止增加。我想要的是宽度限制达到停止输入，当用户按下回车键时再次开始输入。

继承人示例代码：

var maindivwidth = $('.maindiv').width();           
var vWidth = 0;
var hIncr = 2;   
var tWidth = $('textarea')[0].value.length;
var iheight = $(dividfortextbox).css('font-size').replace('px','');

$(dividfortextbox).keypress(function(e) {

if ((e.keyCode || e.which) == 13) {

$(this).parent(dividfortext).css('height', (hIncr * iheight) + 'px');
  vWidth = 0;
  hIncr++;
}
else 
{       
    vWidth = (vWidth+1);

 if (tWidth < maindivwidth-aminus && vWidth*9 > tWidth){
 tWidth = vWidth*9;
 $(this).parent(dividfortext).css('width', (tWidth) + 'px');

 }
 else{
    ??????????????????????????
 } 

 }
 });
4

1 回答 1

1

如果我猜对了，这可能就是您要查找的内容：自动增长文本区域 (jsFiddle)

此处无需用户按回车继续书写，文本区域自动垂直扩展。根据您项目的性质，这 - 虽然远非完美！- 可能很好地完成这项工作。请注意，此方法需要 jQuery，但显然没有它也可以完成。

HTML

<div id="textareaContainer">
   <textarea id="expandTextArea"></textarea>
</div>

CSS

#expandTextArea {
padding:8px 1%;
height:20px;
width:160px;
font-size:16px;
color:#242424;
border:1px solid #333;

/*important for getting the smooth expansion effect*/
-webkit-transition: height 0.6s;
-webkit-transition-timing-function: height 0.6s; 
-webkit-transition: width 0.6s;
-webkit-transition-timing-function: width 0.6s;

overflow:hidden;
}

jQuery

$('textarea#expandTextArea').live('keydown', function() {

//insert your values here
var expandTextareaAfter = 20; //characters, grow horizontally
var breakRowAfter = 50; // characters, grow vertically
var fontSize = 16; //textarea fontsize in px

var ta = $("#expandTextArea");
var nrOfLetters = ta.val().length;
var newWidth = (nrOfLetters*9);

//check if textarea is full and expand the textarea horizontally/vertically
if ((nrOfLetters >= expandTextareaAfter) && (nrOfLetters <= breakRowAfter)) {
    ta.css("width", newWidth+"px");
} else if (nrOfLetters > expandTextareaAfter) {
    ta.css("height", ((fontSize+1) * (Math.round(nrOfLetters/breakRowAfter))) + "px");
}
});​
于 2012-11-06T23:00:11.017 回答