Max Power Max Power - 4 months ago 16
Javascript Question

flexible height of <textarea> as a new line breaks

I haven't seen this done before but I'm hoping it can be done. I'm trying to have an automatic height of a textarea as text is written inside of it. As seen here...

i.stack.imgur.com/oxRfj.jpg

i.stack.imgur.com/XVzYT.jpg

(sorry have to copy links, rep is too low).

Hopefully these images explain what I mean. the second image is also showing its theoretical max height.

https://jsfiddle.net/nupk26Ly/

.text-f {
border: none;
border-bottom: #183A4C solid 1px;
color: #183A4C;
font: 1rem/2.4rem Georgia, serif;
margin-top: 40px;
resize: none;
height: 40px;
width: 100%;
}

Answer

Here is a solution using jquery. Hope it helps.

function h(e) {
  $(e).css({'height':'40','overflow-y':'hidden'}).height(e.scrollHeight);
}
$('textarea').each(function () {
  h(this);
}).on('input', function () {
  h(this);
});
.text-f {
	border: none;
	border-bottom: #183A4C solid 1px;
	color: #183A4C;
	font: 1rem/2.4rem Georgia, serif;
  margin-top: 40px;
	height: 40px;
	width: 100%;
}

.form-btn {
	background: #183A4C;
	border: solid 1px #183A4C;
	color: #fff;
	cursor: pointer;
	display: block;
	font: 1rem/1.333rem Georgia, serif;
	height: 30px;
	width: 140px;
	margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea name="Message" class="text-f" placeholder="Describe your project..."></textarea>

<button class="form-btn" type="button">Submit</button>

Pure Javascript solution (PS: I added an ID (textarea) to the textarea tag )

var textarea = document.getElementById("textarea");

textarea.oninput = function() {
  textarea.style.height = ""; 
  textarea.style.height = Math.min(textarea.scrollHeight) + "px";
};
.text-f {
	border: none;
	border-bottom: #183A4C solid 1px;
	color: #183A4C;
	font: 1rem/2.4rem Georgia, serif;
	width: 100%;
	resize: none;
  height: 40px;
}
<div id="content">
 
 <div id="nav-container">
 
  <input type="checkbox" />
   <span></span>
   <span></span>
   <span></span>
  <nav id="navigation">
  
   <ul>
    <li><a class="n-active" href="index.html">About</a></li>
    <li><a class="n-active" href="portfolio.html">Portfolio</a></li>
    <li><a class="active">Contact</a></li>
   </ul>
  
  </nav>
  
 </div>
 
 <div id="main-headline">
 
 <h1 class="main-header">Fill out the form or contact me alternatively.</h1>
 
 </div>
 
 <div class="hero-wrapper contact-hero">
  
  <span class="page-headline">CONTACT</span>
 
 </div>

 <!----- content ------>
 <div class="content-container">

  <!----- row 1 ------>
  <section class="row">

   <!----- form ------>
   <form name="contact-f" action="#" method="post">
   <div class="col-3 c-left-col">
   
    <input type="text" name="Name" class="input-f i-f-1" placeholder="Name" />
    <input type="text" name="Email" class="input-f" placeholder="Email Address" />
    <input type="text" name="Company" class="input-f" placeholder="Company Name" />
    <input type="text" name="Budget" class="input-f" placeholder="Budget" />
   
   </div>
   
   <div class="col-3 c-right-col">
   
    <textarea id="textarea" name="Message" class="text-f" placeholder="Describe your project..."></textarea>
    
    <button class="link-btn form-btn" type="button">Submit</button>
      
   </div>
   </form>
   
  </section>
  
  <!----- row 2 ------>
  <section class="row c-row-m">
  
   <div class="col-3 c-left-col">
   
    <h3 class="t-centre">Phone</h3>
    <p class="t-centre">+64 27 340 6365</p>

    <h3 class="t-centre c-link">Email</h3>
    <a class="a-links" href="mailto:m@c.co.nz"><p class="t-centre">m@c.co.nz</p></a>
   
   </div>
   
   <div class="col-3 c-right-col">
   
   <h3 class="t-centre c-link">Media</h3>
   <a class="a-links" href=""><p class="t-centre">Facebook</p></a>
   <a class="a-links" href=""><p class="t-centre">Linkedin</p></a>
   <a class="a-links" href=""><p class="t-centre">Behance</p></a>
   
   </div>
  
  </section>
    
 </div> 
 
</div>

Comments