display all textarea rows without scrolling

The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.

Here is the code from the example.

The following example shows how to make a textarea really autogrow while typing.

function autoGrow(oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}

textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

Autoadjust

This example will take care of the case where you remove lines.

function autoAdjustTextArea(o) {
  o.style.height = '1px'; // Prevent height from growing when deleting lines.
  o.style.height = o.scrollHeight + 'px';
}


// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================


// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);

textarea.noscrollbars {
  overflow: hidden;
  width: 400px; /** This is via your example. */
}

<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

Simple jQuery solution is:

$(function() {
    $('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
});

Check Fiddle.

As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('textarea');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

Check Fiddle Here.

Using Jquery and some logic I have tried to do what you need. Here is the jsfiddle; https://jsfiddle.net/45zsdzds/

HTML:

<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>

Javascript:

$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');

CSS:

textarea[name='FurnishingDetails']{
 height:2em;  
}

Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.

No Javascript required.

You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:

.textarea {
  width:250px;
  min-height:50px;
  height:auto;
  border:2px solid rgba(63,63,63,1);
}

<div class="textarea" contenteditable="true">