Cara buat kolom input uang dengan jquery

Kolom input uang yang secara otomatis akan memberikan pemisahan titik pada kolom input html tidak disediakan oleh HTML. HTML 5 hanya mendukung beberapa fitur tipe kolom input sebagai  berikut  date, email, number, hidden dan text. Selengkapnya ada pada kolom berikut :

Value	Description
button	Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox	Defines a checkbox
color	Defines a color picker
date	Defines a date control (year, month and day (no time))
datetime-local	Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email	Defines a field for an e-mail address
file	Defines a file-select field and a “Browse…” button (for file uploads)
hidden	Defines a hidden input field
image	Defines an image as the submit button
month	Defines a month and year control (no time zone)
number	Defines a field for entering a number
password	Defines a password field (characters are masked)
radio	Defines a radio button
range	Defines a control for entering a number whose exact value is not important (like a slider control). Default range is from 0 to 100
reset	Defines a reset button (resets all form values to default values)
search	Defines a text field for entering a search string
submit	Defines a submit button
tel	Defines a field for entering a telephone number
text	Default. Defines a single-line text field (default width is 20 characters)
time	Defines a control for entering a time (no time zone)
url	Defines a field for entering a URL
week	Defines a week and year control (no time zone)

dengan keterangan penanda hanya didukung oleh HTML 5 atau hanya didukung oleh browser yang sudah terbaru dan mendukung html 5 (browser keluaran diatas tahun 2000). secara lebih lengkap dapat dilihat disini.

contoh sintak penggunaan

<input type="date" name="yourInputName" />

Walaupun tidak ada dukungan terhadap kolom rupiah kita bisa menambahkan sendiri dengan menggunakan plugin jquery :

1.  Pertama kita perlu download dulu jquery dan menambahkannya di halaman utama kita :
2.  Kemudian download plugin dan tambahkan  di script kita di halaman yang ingin kita tambahkan input currency tersebut. Silahkan download disini :
3. Kemudian kita perlu menuliskan kode agar input tersebut dapat berjalan dengan menuliskan kode berikut :

   <input type="text" data-affixes-stay="true" data-prefix="Rp " data-thousands="." data-decimal="," data-precision="0" />

   untuk keterangan detail prefix berikut akan ditampilkan resumenya :

   prefix: prefix awal angka misalnya simbol mata uang Rp atau US$ (example: “US$ 1234.23″). default: ” suffix: simbol akhir / suffix misalnya tanda mata uang eropa berikut :  “1234.23 €”). default: ” affixesStay: tetap tampilkan prefix dan suffix jika kolom sudah tidak fokus lagi.  default: true thousands: Pemisah bilangan ribuan. default: ‘,’ decimal: Pemisah desimal . default: ‘.’ precision: berapa banyak kita pengen angka desimal ditampilkan  default: 2 allowZero: Boleh atau nggak diinput dengan nilai 0. default: false allowNegative: Boleh atau nggak diinput dengan nilai minus. default: false formatOnBlur: kasih effect blur jika sudah input. default: false reverse: by default, maskMoney ubah arah dari kiri ke kanan dan sebaliknya. selectAllOnFocus: akan memilih seluruh text yang ada di input saat sedang fokus cursornya. default :false allowEmpty: Boleh atau nggak diinput dengan nilai kosong. default: false

   kita juga bisa menggunakan cara kedua dengan lebih sederhana. caranya kita perlu menambahkan script di html kita sebagai berikut :

4.  $(document).ready(function() {
       $("#moneyInput, #money_input, .currency_input, .money").maskMoney({ thousands:'.', decimal:',', affixesStay: false, precision: 0});
    });

   dengan cara nomor 4 ini maka kita tidak perlu mengetikkan panjang2 untuk membuat setting. Tips buat file terpisah misalnya pre.js untuk ditambahkan di script html anda dan anda cukup menuliskan sintak berikut untuk menambahkan format kolom input mata uang ini .

       <input id="jumlah" class="money" type="text" name="jumlah" value=""/>

Maka tampilan akan berubah tepat saat user mengetikkan angka :

5. Jangan lupa guys… nanti buang titik tersebut di kode backend misalnya saya menggunakan php maka saya perlu membuang kode titik tersebut dengan kode berikut :

str_replace('.', '', $_POST['namaInput']);