document.addEventListener("DOMContentLoaded", function () {
const inputMaxLengthOnLoad = document.querySelector("#inputNama").maxLength;
document.querySelector("#sisaKarakter").innerText = inputMaxLengthOnLoad;
// event onInput
document.getElementById("inputNama").addEventListener("input", function () {
const jumlahKarakterDiketik = document.getElementById("inputNama").value.length;
const jumlahKarakterMaksimal = document.getElementById("inputNama").maxLength;
console.log("Jumlah karakter diketik: ", jumlahKarakterDiketik);
console.log("Jumlah karakter maksimal: ", jumlahKarakterMaksimal);
const sisaKarakterUpdate = jumlahKarakterMaksimal - jumlahKarakterDiketik;
document.getElementById("sisaKarakter").innerText = sisaKarakterUpdate.toString();
if (sisaKarakterUpdate === 0) {
document.getElementById("sisaKarakter").innerText = " Batas maksimal tercapai!";
} else if (sisaKarakterUpdate <= 5) {
document.getElementById("notifikasiSisaKarakter").style.color = "red";
} else {
document.getElementById("notifikasiSisaKarakter").style.color = "black";
}
});
// event onFocus
document.getElementById("inputNama").addEventListener("focus", function () {
console.log("inputNama focus:");
document.getElementById("notifikasiSisaKarakter").style.visibility = "visible";
});
// event onBlur
document.getElementById("inputNama").addEventListener("blur", function () {
console.log("inputNama blur:");
document.getElementById("notifikasiSisaKarakter").style.visibility = "hidden";
});
// event onChage
document.getElementById("inputChaptha").addEventListener("change", function () {
console.log("onhcange captha:");
const inputCaptha = document.getElementById("inputChaptha").value;
const submitButtonStatus = document.getElementById("submitButton");
if (inputCaptha === "PRNU") {
submitButtonStatus.removeAttribute("disabled");
} else {
submitButtonStatus.setAttribute("disabled", "");
}
});
document.getElementById("formDataDiri").addEventListener("submit", function (e) {
const inputChaptha = document.getElementById("inputChaptha").value;
if (inputChaptha === "PRNU") {
alert("Selamat, chaptha anda lolos!");
} else {
alert("Chaptha anda belum tepat!");
document.getElementById("submitButton").setAttribute("disabled", "");
}
e.preventDefault();
});
// eventCopy
document.getElementById("inputCopy").addEventListener("copy", function () {
alert("Anda telah men-copy sesuatu...");
});
// eventPaste
document.getElementById("inputPaste").addEventListener("paste", function () {
alert("Anda telah men-paste sebuah teks...");
});
});
