JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea data-autoresize spellcheck="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam possimus cupiditate a sint deserunt at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nulla labore, consectetur nam quisquam, fugiat similique dolor error, eos quibusdam aperiam amet omnis numquam...
CSS
textarea {
margin: 0;
outline: none;
width: 500px;
padding: 15px;
font-size: 16px;
line-height: 1.5;
resize: none;
box-sizing: border-box;
word-wrap: break-word;
}
JavaScript
(function($) {
$.each($("textarea[data-autoresize]"), function() {
var $this = $(this)
var resizeTextarea = function(e) {
// Ajout pour compter la bordure
var offset = e.offsetHeight - e.clientHeight;
e.style.height = e.scrollHeight + offset + "px"
};
$this.on("keyup input", function() {
resizeTextarea(this)
});
var lastOverflowY = this.style.overflowY
this.style.overflowY = "hidden"
resizeTextarea(this)
this.style.overflowY = lastOverflowY
});
})(jQuery);