Bidang input teks HTML dengan simbol mata uang

Saya ingin memiliki kolom input teks yang berisi tanda "$" di awal, dan tidak peduli apa pengeditan yang terjadi pada kolom tersebut, agar tanda tersebut tetap ada.

Saya akan lebih baik jika hanya angka yang diterima untuk masukan, tapi itu hanya tambahan yang bagus.

Pertimbangkan untuk menyimulasikan bidang masukan dengan awalan tetap atau akhiran menggunakan rentang dengan batas di sekitar bidang masukan tanpa bingkai. Berikut adalah contoh permulaan dasar:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Gunakan .input-icondiv induk . Tambahkan secara opsional .input-icon-right.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

Sejajarkan ikon secara vertikal dengan transformdan top, dan atur pointer-eventske nonesehingga klik fokus pada input. Sesuaikan paddingdan widthsesuai:

.input-icon {
  position: relative;
}

.input-icon > i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon > input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right > i {
  right: 0;
}

.input-icon-right > input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

Tidak seperti jawaban yang diterima, ini akan mempertahankan sorotan validasi input, seperti batas merah ketika ada kesalahan.

Contoh penggunaan JSFiddle dengan Bootstrap dan Font Awesome

Anda dapat membungkus bidang masukan Anda menjadi suatu rentang, yang Anda inginkan position:relative;. Kemudian Anda menambahkan dengan :before content:"€"simbol mata uang Anda dan membuatnya position:absolute. Bekerja JSFiddle

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

Perbarui Jika Anda ingin meletakkan simbol euro baik di kiri atau kanan kotak teks. Bekerja JSFiddle

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

CSS

 .input-euro {
     position: relative;
 }
 .input-euro.left input {
     padding-left:18px;
 }
 .input-euro.right input {
     padding-right:18px;
     text-align:end; 
 }

 .input-euro:before {
     position: absolute;
     top: 0;
     content:"€";
 }
 .input-euro.left:before {
     left: 5px;
 }
 .input-euro.right:before {
     right: 5px;
 }

Karena Anda tidak dapat melakukan ::beforedengan content: '$'input dan menambahkan elemen yang benar-benar diposisikan menambahkan html ekstra - Saya suka lakukan pada latar belakang SVG inline css.

Ini berjalan seperti ini:

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

Ini menghasilkan yang berikut:

Catatan: semua kode harus dalam satu baris. Dukungan cukup bagus di browser modern, tetapi pastikan untuk mengujinya.

Saya akhirnya membutuhkan tipe untuk tetap menjadi angka, jadi menggunakan CSS untuk mendorong tanda dolar ke bidang input menggunakan posisi absolut.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>

Letakkan '$' di depan kolom input teks, bukan di dalamnya. Itu membuat validasi untuk data numerik jauh lebih mudah karena Anda tidak perlu mengurai '$' setelah mengirimkan.

Anda dapat, dengan JQuery.validate () (atau lainnya), menambahkan beberapa aturan validasi sisi klien yang menangani mata uang. Itu akan memungkinkan Anda untuk memiliki '$' di dalam kolom input. Tetapi Anda masih harus melakukan validasi sisi server untuk keamanan dan itu membuat Anda kembali ke posisi harus menghapus '$'.

 $<input name="currency">

Lihat juga: Membatasi input ke kotak teks: hanya mengizinkan angka dan titik desimal

Jika Anda hanya perlu mendukung Safari, Anda dapat melakukannya seperti ini:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

dan bidang masukan seperti

<input class="currency" data-symbol="€" type="number" value="12.9">

Dengan cara ini Anda tidak memerlukan tag tambahan dan menyimpan informasi simbol di markup.

Solusi lain yang saya sukai adalah menggunakan elemen input tambahan untuk gambar simbol mata uang. Berikut adalah contoh penggunaan gambar kaca pembesar dalam bidang teks penelusuran:

html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

css:

#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}

Ini menghasilkan input di sidebar kiri di sini:

https://fsfe.org

Saya baru saja menggunakan: before dengan input dan mengirimkan $ sebagai konten

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}

Untuk bootstrap kerjanya

<span class="form-control">$ <input type="text"/></span>

Jangan gunakan class = "form-control" di kolom input.

Tak satu pun dari jawaban ini yang benar-benar membantu jika Anda ingin menyelaraskan batas kiri dengan bidang teks lain pada formulir masukan.

Saya akan merekomendasikan memposisikan tanda dolar secara mutlak ke kiri sekitar -10px atau kiri 5px (tergantung apakah Anda menginginkannya di dalam atau di luar kotak input). Solusi di dalam membutuhkan arah: rtl pada css masukan.

Anda juga dapat menambahkan padding ke masukan untuk menghindari arah: rtl, tetapi itu akan mengubah lebar wadah masukan agar tidak cocok dengan wadah lain dengan lebar yang sama.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

atau

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

https://i.imgur.com/ajrU0T9.png

Contoh: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%

Ya, jika Anda menggunakan bootstrap, ini akan berhasil.

.form-control input {
    border: none;
    padding-left: 4px;
}

dan

<span class="form-control">$ <input type="text"/></span>

.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>