45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
"use strict";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const handlerCounter = (event) => {
|
|
const comment = event.target;
|
|
const length = comment.value.length;
|
|
const maxLength = comment.maxLength;
|
|
const counter = document.getElementById("comment-count");
|
|
|
|
counter.innerText = `${length}/${maxLength}`;
|
|
|
|
if (length > maxLength - 50) {
|
|
counter.classList.remove("text-muted");
|
|
counter.classList.add("text-danger");
|
|
} else {
|
|
counter.classList.remove("text-danger");
|
|
counter.classList.add("text-muted");
|
|
}
|
|
};
|
|
|
|
const handlerSize = () => {
|
|
const scroll = window.scrollY;
|
|
const comment = document.getElementById("comment");
|
|
const counter = document.getElementById("comment-count");
|
|
const commentHeight = comment.clientHeight;
|
|
const counterHeight = counter.clientHeight;
|
|
|
|
if (commentHeight + 0.5 * counterHeight < comment.scrollHeight) {
|
|
comment.style.height = `${comment.scrollHeight + counterHeight}px`;
|
|
}
|
|
};
|
|
|
|
const addValidation = () => {
|
|
const comment = document.getElementById("comment");
|
|
const counter = document.getElementById("comment-count");
|
|
comment.style.height = `${comment.scrollHeight + counter.style.height}px`;
|
|
|
|
comment.addEventListener("input", handlerCounter);
|
|
comment.addEventListener("input", handlerSize);
|
|
window.addEventListener("resize", handlerSize);
|
|
};
|
|
|
|
addValidation();
|
|
});
|