logo
  • Home
  • Pemrograman
    • Website
      • PHP
      • MySQL
      • Ajax
      • CSS
      • JavaScript
      • HTML
    • Framework
      • Laravel
      • Lumen
      • Yii2
  • Sistem Operasi
    • Linux
    • Android
    • Windows
  • Kehidupan
    • Cinta
    • Ga Jelas
  • Home
  • Pemrograman
    • Website
      • PHP
      • MySQL
      • Ajax
      • CSS
      • JavaScript
      • HTML
    • Framework
      • Laravel
      • Lumen
      • Yii2
  • Sistem Operasi
    • Linux
    • Android
    • Windows
  • Kehidupan
    • Cinta
    • Ga Jelas

JQuery: Menghitung Sisa Karakter

01 Apr 2015 by Nasrul Hadi 0 Comments

Halo programmer,

Sudah lama sekali ngga update, entah masih ada pengunjung atau ngga, yg penting terus nulis dan bermanfaat. Kali ini membahas tentang menghitung sisa karakter di suatu form, terserah mau pake input type:text,password,dll atau pake textarea juga bisa syaratnya hanya menaruh tag "maxlength" di setiap element yg mau dibaca. (kenapa maxlength? element minoritas yg jarang digunakan dan jika digunakan sekalipun biasanya hanya beberapa element) Langsung aja ya, dibawah ini nih contoh elementnya (contoh kali ini menggunakan textarea)

<textarea class="form-control" maxlength="160" rows="5" name="Kirim[pesan]" id="Kirim_pesan"></textarea>

Lalu, dibawah ini scriptnya, jika sisa karakter kurang dari 20 warna font nya berubah jadi merah.

var supportOnInput = 'oninput' in document.createElement('input');

	$("textarea[maxlength]").each(function() {
	    var $this = $(this);
	    var maxLength = parseInt($this.attr('maxlength'));
	    $this.attr('maxlength', 160);
	    
	    var el = $("<div class="help-block">" + maxLength + " karakter</div>");
	    el.insertAfter($this);
	    
	    $this.bind(supportOnInput ? 'input' : 'keyup', function() {
	        var cc = $this.val().length;
	        
	        el.text((maxLength-cc)+" karakter");
	        
	        if((maxLength-20) < cc) {
	            el.css('color', 'red');
	        } else {
	            el.css('color', null);
	        }
	    });
	});

Uda paham kan? semoga bermanfaat 🙂

Categories : Ajax, JavaScript, Project, Tutorial, Web Programming
Tags : javascript, jquery, php, yii
Nasrul Hadi

Sudah menikah, dan sekarang jadi bapak rumah tangga. Contact: nasrul[at]arekmedia.com

Related Post

Kirim Email Di Lumen 5.2 Menggunakan Mandrill

Kirim Email Di Lumen 5.2 Menggunakan Mandrill

09 Apr 2016
5 Plugin Wajib di WordPress

5 Plugin Wajib di WordPress

23 Oct 2015
Otomatis Http ke Https

Otomatis Http ke Https

17 Dec 2014

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Sudah menikah, dan sekarang jadi bapak rumah tangga.
nasrul[at]arekmedia.com

Nasrul Hadi

Social

Recent Posts

latestwid-img

Modem Indihome Kena Hack!

15 May 2017
latestwid-img

SSL Gratis dari Let’s Encrypt!

9 September 2016
latestwid-img

Kirim Email Di Lumen 5.2 Menggunakan Mandrill

9 April 2016
latestwid-img

5 Plugin Wajib di WordPress

23 October 2015
latestwid-img

Mengatasi Space Server Penuh

14 May 2015

Recent Comments

  • philtyphils on Kirim Email Di Lumen 5.2 Menggunakan Mandrill
  • Muhamad Husein on SSL Gratis dari Let’s Encrypt!
  • Ceth on From Nu Mountain with Love
  • SSL Gratis dari Let's Encrypt | Sementara Itu... on Otomatis Http ke Https
  • Abdul Hamid on Kirim Email Di Lumen 5.2 Menggunakan Mandrill

Archives

  • May 2017
  • September 2016
  • April 2016
  • October 2015
  • May 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2012
  • March 2012
  • July 2011
  • June 2011
  • May 2011

Follow @ Instagram

dibuat di kamar Nasrul untuk dunia.