防止输入时文本的水平扩展。文本可以垂直扩展

我有一段代码让我可以输入textarea。我在按键上增加了textarea的宽度，我给宽度一个限制，之后它应该停止增加。我想要的是在宽度限制范围内停止输入，并且当用户按下Enter键时再次输入。防止输入时文本的水平扩展。文本可以垂直扩展

继承人的示例代码：

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{ 
    ?????????????????????????? 
} 

} 
});

来源

2012-11-06 shabbir.rang

你是什么意思 “的宽度限制范围停止打字”，你的意思Ť他textarea应该停止增长，因此水平扩大？如果是这样，这可能对您有用：http://stackoverflow.com/a/10842271/1262619只需将扩展从垂直更改为水平，并使用与示例中相同的方法设置textarea的最大扩展宽度 – Jonathan

嗨，感谢您的回复。我有一个textarea里面的div。我正在用按键增加div宽度。因此，当div宽度达到最大限制时，打字应该停止，并在输入按下键入应开始。 –

其实给定的答案不应该被接受。这不完全是你想要的，而是对它的极端修改。此外，通过简单的CSS可以完成这个答案。 –

如果我给你的权利，这可能是你在找什么：Auto grow text area (jsFiddle)

无需使用者按回车这里继续书写时， textarea自动垂直扩展。根据你的项目的性质，这 - 虽然远非完美！ - 可能很好地完成这项工作。请注意，这种方法需要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-06 23:00:11 Jonathan

写得很好。谢谢！ –

防止输入时文本的水平扩展。文本可以垂直扩展

回答

相关问题