防止輸入時文本的水平擴展。文本可以垂直擴展

我有一段代碼讓我可以輸入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

寫得很好。謝謝！ –

防止輸入時文本的水平擴展。文本可以垂直擴展

回答

相關問題