Auto Height textarea

Developer
Francois Coron
Size
2,464 Kb
Views
12,144
  1. Auto Height textarea Previews
  2. Auto Height textarea HTML Codes
  3. Auto Height textarea CSS Codes
  4. Auto Height textarea JS Codes

How do I make an auto height textarea?

What is a auto height textarea? How do you make a auto height textarea? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.

Auto Height textarea Previews
IQ Test

Auto Height textarea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto Height textarea</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> ;<div class="c-container">	<form action="#" class="c-form c-form--comment">	<div class="c-form__field">	<label for="name" class="c-form__label">Name</label>	<input class="c-form__input" type="text" name="name" id="name" />	</div>	<div class="c-form__field">	<label for="comment" class="c-form__label">Comment</label>	<textarea name="comment" id="comment" class="c-form__textarea"></textarea>	</div>	<div class="c-form__field">	<button class="c-form__submit" type="submit">Publish</button>	</div>	</form>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Auto Height textarea - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif;
}
.c-container { max-width: 1024px; margin: 0 auto;
}
.c-form { padding: 20px; width: 30rem; margin: 0 auto;
}
.c-form__field { margin-bottom: 10px;
}
.c-form__label { display: block; margin-bottom: 5px;
}
.c-form__input { width: 100%; height: 35px; padding: 0 10px;
}
.c-form__textarea { display: block; overflow: hidden; width: 100%; padding: 10px; font-size: 1.2rem;
}
.c-form__submit { display: block; width: 100%; padding: 10px; cursor: pointer;
}

Auto Height textarea - Script Codes JS Codes

$('#comment').on('keydown',function(){	$(this).css('height','auto');	if ( $(this).val() ) {	$(this).height((this.scrollHeight) - 20);	}
});
Auto Height textarea - Script Codes
Auto Height textarea - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 2,464 Kb
Views 12,144
Do you need developer help for Auto Height textarea?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Francois Coron (francoiscoron) Script Codes
Name
Starter jade
A Pen by Francois Coron
Hover img
Starter CP
Simple Button Icons
Close SVG
Buttons
Responsive Nav
UI Quotes
SVG CREAM
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!