flexible height of <textarea> as a new line breaks
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
console.log(this.scrollHeight , this.baseScrollHeight);
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
this.rows = minRows + rows;
});
Check this link
this is a an auto-expandable text area that i did a while ago, might work for you. works on mobiles too
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
function updateTextbox(text) {
$('#cagetextbox').val(text);
//$('#cagetextbox').attr("rows", Math.max.apply(null, text.split("\n").map(function(a){alert(a.length);return a.length;})));
};
updateTextbox("");textarea{
display:block;
box-sizing: padding-box;
overflow:hidden;
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
border-radius:8px;
border:6px solid #556677;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea id="cagetextbox" class='autoExpand' rows='3' data-min-rows='3' placeholder='Write here!! I expand!'></textarea>
</body>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, 300) + "px"; */
textarea.style.height = 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="main-headline">
<h1 class="main-header">Fill out the form or contact me alternatively.</h1>
</div>
<!----- content ------>
<div class="content-container">
<!----- row 1 ------>
<section class="row">
<!----- form ------>
<form name="contact-f" action="#" method="post">
<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>
</div>
</div>