Sobatcoding.com - Plugin Javascript Autonumeric.js Untuk Formating Currency Atau Numeric
Kita kali ini akan mencoba belajar menggunakan plugin javascript bernama Autonumeric.js. Plugin ini sangat berguna untuk kalian yang mencari plugin javascript yang bisa digunakan untuk formating currency pada file input. Bagaimana cara penggunaannya? Berikut langkah-langkahnya:
Sebelumnya kita download terlebih dahulu plugin autonumeric js melalui link berikut http://autonumeric.org/. Untuk contoh kali ini admin menggunakan AutoNumeric.js v4.5.4. Kalian biasa sesuaikan dengan versi yang paling baru. Contoh kita buat file html seperti berikut.
<!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>Autonumeric JS</title>
//Tambahkan file jquery dan autonumeric js yang telah di download atau mengunakan CDN
<script src="./jquery.min.js"></script>
<script src="./autonumeric.js"></script>
</head>
<body>
<input id="input-vol" value="0"/>
</body>
</html>
Untuk inisialisasi banyak elemen sekaligus kita bisa gunakan script berikut:
<script>
new AutoNumeric( '#input-vol', {decimalCharacter: AutoNumeric.options.decimalCharacter.comma,digitGroupSeparator: AutoNumeric.options.digitGroupSeparator.dot});
</script>
atau untuk multiple class kita bisa gunakan kode seperti berikut.
new AutoNumeric.multiple(elm, AutoNumeric.getPredefinedOptions().commaDecimalCharDotSeparator );
artinya untuk separator desimal menggunakan koma (comma) dan separator ribuan menggunakan titik.
Untuk mendapatkan autonumeric value melalu javascript kita bisa gunakan kode seperti berikut.
var volume = AutoNumeric.getAutoNumericElement( '#input-vol').get();
console.log(volume);
Untuk set autonumeric dinamically atau secara dinamis kita bisa gunakan script sebagai berikut
AutoNumeric.getAutoNumericElement('#input-vol').set(0);
Untuk full code javascript nya seperti beriku.
<script>
new AutoNumeric( '#input-vol', {decimalCharacter: AutoNumeric.options.decimalCharacter.comma,digitGroupSeparator: AutoNumeric.options.digitGroupSeparator.dot});
AutoNumeric.getAutoNumericElement('#input-vol').set(10000);
var volume = AutoNumeric.getAutoNumericElement( '#input-vol').get();
console.log(volume);
</script>
Komentar 1