Submitted by mrrfly in nodejs (edited )

Input format rupiah dapat dilakukan secara otomatis menggunakan javascript. Disini saya akan menggunakan fungsi Built-in dari javascript yang bernama Intl.NumberFormat.


Adapun tutorialnya adalah sebagai berikut:

1. Buat Input type Text

Hal pertama yang harus dilakukan adalah membuat tag html berupa input type text.

<input
  type="text"
  id="rupiah"
  placeholder="Ketik Nominal"
>

Dan buatlah atribut oninput yang berisikan function javascript yang akan kita buat nanti dan masing-masing function tersebut memiliki sebuah parameter yang berisikan nilai dari input tersebut.

2. Buat Function Javascript: numberFormat dan rupiahFormat

Untuk penamaan function ini bebas penamaannya terserah yang bikin. Tapi saya menamakan function tersebut sesuai dengan fungsinya.

1. numberFormat(value)
Function ini berfungsi untuk merubah inputan yang tadinya teks, menjadi sebuah nomor. Kalau gitu kenapa tidak pake type number saja ? kenapa harus teks ?

Oke, berdasarkan pengamatan saya yang dangkal ini, input type number tidak mendukung simbol titik lebih dari 1. Sedangkan dalam membuat format rupiah, simbol titik harus bisa digunakan lebih dari 1 sesuai dengan jumlah nominalnya. Maka dari itu, saya menggunakan type text untuk inputannya.

Mungkin disini ada yang pake metode lebih efisien ? sharing kuy hehehe....
Adapun scriptnya adalah sebagai berikut:

function numberFormat(value) {
  return document.getElementById('rupiah').value = value.replace(/[^0-9.]/g, '').replace(/(\*?)\*/g, '$1')
}

2. rupiahFormat(value)
Function ini memiliki fungsi untuk merubah inputan yang tadinya tidak bernominal, sekarang akan menjadi ada nominalnya. Adapun fungsinya sebagai berikut:

function rupiahFormat(value) {
  let rupiahInput = document.getElementById('rupiah')
  let rupiahReplace = rupiahInput.value.replaceAll('.', '')
  let rupiahValue = new Intl.NumberFormat('id-ID').format(rupiahReplace)

  return rupiahInput.value = rupiahValue
}

3. outputRupiah()
Function ini memiliki fungsi untuk melihat hasil dari inputan yang telah diketik. Adapun fungsinya sebagai berikut:

function outputRupiah() {
  let rupiahValue = document.getElementById('rupiah').value
  
  document.getElementById('hasil-input').innerText = rupiahValue
  
  document.getElementById('hasil-rupiah').innerText = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(rupiahValue.replaceAll('.', ''))
}

4. Final
Sisanya tinggal tambahkan sebagai berikut:

<input
  type="text"
  id="rupiah"
  placeholder="Ketik Nominal"
  oninput="numberFormat(this.value);rupiahFormat(this.value);outputRupiah();"
>

<table>
  <tr>
    <th>
      Input
    </th>
    <td>:</td>
    <td id="hasil-input"></td>
  </tr>
  <tr>
    <th>
      Rupiah
    </th>
    <td>:</td>
    <td id="hasil-rupiah"></td>
  </tr>
</table>

Tada!!! Selesai Silahkan Dicoba :D

Demo: https://jsfiddle.net/mrrfly/ca74znyw/31/

Referensi: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Semoga Bermanfaat :)

1

Comments

You must log in or register to comment.

There's nothing here…