I have two divs side by side, both with textareas. I want their content to line up exactly, line by line. So instead of the text wrapping if a line gets to long, I'd rather the textarea just get wider.
I'm not sure what to calculate though to see if a line has gotten too big.
I have two divs side by side, both with textareas. I want their content to line up exactly, line by line. So instead of the text wrapping if a line gets to long, I'd rather the textarea just get wider.
I'm not sure what to calculate though to see if a line has gotten too big.
Share Improve this question asked Sep 18, 2013 at 12:47 James FJames F 5541 gold badge9 silver badges19 bronze badges4 Answers
Reset to default 3Given this HTML:
<textarea id="theID" rows=5 cols=15></textarea>
you can try with the following JS + jQuery:
var minCol = $('#theID').attr('cols');;
$('#theID').keyup(updateCols);
function updateCols() {
var lines = $('#theID').val().split(/\n/);
var lineMaxLenght = getLineMaxLenght(lines);
if (lineMaxLenght >= minCol) {
$('#theID').attr('cols', lineMaxLenght);
}
}
function getLineMaxLenght(lines) {
var max = -1;
for (var i = 0; i < lines.length; i++) {
if (lines[i].length > max) {
max = lines[i].length;
}
}
return max;
}
You can improve getLineMaxLenght using some other library
FIDDLE
Demo from impressive webs
HTML
<p>Code explanation: <a href="http://www.impressivewebs./textarea-auto-resize/">Textarea Auto Resize</a></p>
<textarea id="ments" placeholder="Type many lines of texts in here and you will see magic stuff" class="mon"></textarea>
JS
/*global document:false, $:false */
var txt = $('#ments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv mon');
$('body').append(hiddenDiv);
txt.on('keyup', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'mmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.mon {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}
if you want to resize the width of a textarea you need to change the "cols" attribute.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txtarea").keyup(function(){
if($("#txtarea").val().length > 20){
$("#txtarea")[0].cols = $("#txtarea").val().length;
}
});
});
</script>
</head>
<body>
<textarea id="txtarea"></textarea>
</body>
</html>
Try this. Also i posted this jsFiddle (http://jsfiddle/xPCB4/) so you can see it in action. I hope this is what you needed.
$(document).ready(function(){$('textarea').autosize();});