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 :

    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. 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 .

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 :

Our Score

Komentari bro