Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana cara validasi spasi atau enter pada text area dengan vanila javascript?
Saya ingin membuat validasi untuk text area supaya bisa mendeteksi value yang hanya berisi spasi atau enter saja. Cara kerjanya yaitu jika value pada text area berisi spasi atau enter saja maka tombol kirim akan menjadi disabled=true, tapi jika value text area berisi huruf atau angka maka tombol kirim menjadi disabled=false itu bagaimana caranya ya gan? mohon pencerahannya
<form>
<textarea class="input-komen" placeholder="Ketikkan komentarmu disini" rows="1" id="text" onkeyup="textKomen()" maxlength="300"></textarea>
<div class="btn-input-komen">
<input type="submit" name="submit" value="Kirim" id="kirimKomen">
<a href="#!" id="clear">Cancel</a>
</div>
</form>
<script>
function textKomen() {
const masuk = document.getElementById('text');
const detect = masuk.value.toUpperCase();
const btnSend = document.getElementById("kirimKomen");
if (detect.length < 1 || detect == null) {
btnSend.style.backgroundColor = "#d1d1d1";
btnSend.disabled=true;
}else{
btnSend.disabled=false;
btnSend.style.backgroundColor = "#5186ff";
}
}
</script>
3 Jawaban:
<div>Kebetulan saya lagi belajar lewat tutorial di forum ini. <br>nah di forum ini ada contoh di video tutorial yang mirip dengan yang di maksud, meskipun pembahasan menggunakan kotlin mungkin bisa di aplikasikan di java karena mirip secara penulisan.<br>Semoga bisa membantu.<br><a href="https://sekolahkoding.com/kelas/belajar-android-untuk-pemula/video/mengambil-text-berdasarkan-input">https://sekolahkoding.com/kelas/belajar-android-untuk-pemula/video/mengambil-text-berdasarkan-input</a><br><br></div>
Jawaban Terpilih
<div>Hallo, saya bantu jawab yaa, coba kodenya dibuat seperti ini :<br><br></div><pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<textarea class="input-komen" placeholder="Ketikkan komentarmu disini" rows="5" id="text" onkeyup="textKomen()" maxlength="300"></textarea>
<div class="btn-input-komen">
<input type="submit" name="submit" value="Kirim" id="kirimKomen">
<a href="#!" id="clear">Cancel</a>
</div>
</form>
<script type="text/javascript">
function textKomen() {
const textArea = document.querySelector("#text");
const button = document.querySelector("#kirimKomen");
if(textArea.value.toString().trim() === "") {
button.setAttribute("disabled", "disabled");
} else {
button.removeAttribute("disabled");
}
}
</script>
</body>
</html></pre><div><br>Hasilnya bisa dicek di sini <a href="https://codepen.io/ahanafi/pen/PoWbXVj">https://codepen.io/ahanafi/pen/PoWbXVj</a><br><br>Semoga terbantu! :)</div>
Tanggapan
Wah terimakasih kak atas bantuannya
<div>Coba :</div><pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<textarea class="input-komen" placeholder="Ketikkan komentarmu disini" rows="5" id="text" onkeyup="textKomen()" maxlength="300"></textarea>
<div class="btn-input-komen">
<input type="submit" name="submit" value="Kirim" id="kirimKomen" disabled>
<a href="#!" id="clear">Cancel</a>
</div>
</form>
<script type="text/javascript">
function textKomen() {
const textArea = document.querySelector("#text");
const button = document.querySelector("#kirimKomen");
if(textArea.value.toString().trim() === "") {
button.setAttribute("disabled", "disabled");
} else {
button.removeAttribute("disabled");
}
}
</script>
</body>
</html></pre><div><br>Atau ubah bagian ini ( dari kode mas @ahanafi ) :</div><pre><input type="submit" name="submit" value="Kirim" id="kirimKomen"></pre><div><br>Menjadi :</div><pre><input type="submit" name="submit" value="Kirim" id="kirimKomen" disabled></pre><div><br>Semoga membantu!</div>
