Quick actions

cmd+k|ctrl+k

Navigation

Languages

Form event

Snippet info

Language

JavaScript

Visibility

public

Author

franskbarek

Created

2022-10-02T09:37:26.215448Z

Updated

2022-10-06T05:05:57.90411Z


      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...");
        });
      });
INFO