JavaScript Tutorial : Menghitung dan Membatasi Karakter pada Textarea

oleh pino · April 9, 2023

5.00 avg. rating (97% score) - 3 votes

JavaScript Tutorial : Menghitung dan Membatasi Karakter pada Textarea. Pada kesempatan kali ini akan saya buat tutorial sederhana yakni bagaimana cara menghitung karakter pada textarea dan membatasi karakter yang bisa dimasukkan/di inputkan dengan menggunakan JavaScript.

Oke lah, gak usah panjang lebar jelasinnya, pasti sudah tahu kan maksudnya.

Langsung saja, berikut ini Scriptnya:

<html>
<head>
<script language="javascript" type="text/javascript"> 
	var maxAmount = 250;
	function textCounter(textField, showCountField) {
		if (textField.value.length > maxAmount) {
			textField.value = textField.value.substring(0, maxAmount);
		} else { 
			showCountField.value = maxAmount - textField.value.length;
		}
	}
</script>
</head>
<body>
	<form>
		<textarea name="ta" rows="6" style="width:340px;" onKeyDown="textCounter(this.form.ta,this.form.countDisplay);" onKeyUp="textCounter(this.form.ta,this.form.countDisplay);"></textarea>
		<br>
		<input readonly type="text" name="countDisplay" size="3" maxlength="3" value="250"> Sisa Karakter
	</form>
</body>
</html>

<html>

<head>

var maxAmount = 250;

function textCounter(textField, showCountField) {

if (textField.value.length > maxAmount) {

textField.value = textField.value.substring(0, maxAmount);

} else {

showCountField.value = maxAmount - textField.value.length;

}

</script>

</head>

<body>

<form>

<br>

<input readonly type="text" name="countDisplay" size="3" maxlength="3" value="250"> Sisa Karakter

</form>

</body>

</html>

Simpan dengan nama index.html.

Perhatikan pada baris ke-4 dalam kode diatas terdapat angka 250, ini adalah jumlah karakter yang bisa dimasukkan dalam textarea, silahkan rubah sesuka hati..

Sekian dulu tutorial singkat ini, semoga bisa membantu..

Wava berkata:

Mei 9, 2014 pukul 1:36 pm

Mas pino, saya wava dari Gresik.
ini scipt kalo sudah selesai apa hanya di taruh di HTDOCS nya ajah gitu apa harus gimana atau apanya yang harus di rubah?

Balas
- pino berkata:
  
  Mei 9, 2014 pukul 6:08 pm
  
  ini cuma kode html dan javascript saja, jadi buat dalam satu folder saja. gak sudah di taruh di htdocs.
  
  Balas
audio haji berkata:

September 2, 2022 pukul 9:52 am

ok terima kasih

Balas
Februari 4, 2015 pukul 5:55 am

sukses om .. da cb ikutin beberapa tutor diluar sana gagal smua, ngikutin tutor dimari sukses berat
ngemeng2, masang emoticon kaskus di komen bijimane om, hehe kebenran template sama nih, hueman

Balas
- pino berkata:
  
  Februari 7, 2015 pukul 7:27 pm
  
  hehehe.. download aja gan plugin nya.. kaskus emoticon
  
  Balas
fikar berkata:

Juni 1, 2015 pukul 2:35 am

Om mau nanya…. Kalo mau ngebatisi input database gimana…?
Contohny…
Kelas A hanya boleh input data siswa sbanyak
20 orang.. Dan kalo di input lagi akan muncul pesan…”kelas sudah penuh”…..

Balas
- pino berkata:
  
  Juni 1, 2015 pukul 6:16 pm
  
  hitung dulu, pakek query count, silahkan googling
  
  Balas
Johnb0 berkata:

Agustus 31, 2016 pukul 8:00 pm

I like this weblog so considerably, saved to my bookmarks. ecadedeagbgf

Balas