Bidang input teks HTML dengan simbol mata uang


104

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.

Jawaban:


103

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>


13
selain itu Anda bisa membungkus '$' di dalam tag <Label>. Ini akan memindahkan fokus ke bidang masukan saat mereka mengklik '$' - teks
Cohen

2
@Cohen Meskipun ide yang bagus, memiliki lebih dari satu label dapat menyebabkan masalah aksesibilitas .
rybo111

63

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


Aku ingin ini dengan sebuah tombol dalam satu baris rapi dan harus menambahkan float:leftke input-symboldiv
kluka

@ rybo111 tidak, maksud saya tombol terpisah yang ada di luar input-symbolwadah
kluka

Anda benar, floatitu buruk jadi saya menggunakan display:inline-blockgabungan dengan vertical-align:bottomsekarang :) Saya tidak bisa dengan cepat membuat biola, ada terlalu banyak CSS lain yang masuk dalam contoh saya saat ini ;-)
kluka

1
Saya suka jawaban ini daripada yang diterima karena ini (seperti yang disebutkan penulis) mempertahankan perilaku validasi bootstrap yang hebat !, terima kasih atas bantuan ini.
Vadiraj

30

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;
 }

Ini sangat dekat dengan yang saya inginkan, tetapi inputnya tidak stasioner pada lebar halaman dan tidak dapat menggunakan absolut. Relatif juga menggerakkan simbol. Bagaimana kita dapat mengatur posisi absolut / relatif terhadap input pojok kiri atas?
nwolybug

Mata uang euro selalu ditampilkan di sebelah kanan. Anda harus meletakkan simbol Anda di kanan, bukan di kiri.
jadok

Saya orang Prancis dan harganya selalu ditulis seperti € 2,50 bukan € 2,50 dan saya cukup yakin bahwa negara lain di zona euro melakukan hal yang sama.
jadok

2
@jadok Saya tinggal di Belanda di sini harga ditulis € 2,50.
Vincent Kok

1
@VincentKok Setelah bertanya-tanya sepertinya tergantung negaranya, negara eropa latines (Perancis, spanyol, ...) akan letakkan di sebelah kanan dan negara eropa utara / timur di sebelah kiri, anda bisa mencobanya dengan amazone sebagai contoh : www.amazone.fr, www.amazone.nl, ...
jadok

22

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:

svg tanda dolar latar belakang css

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


2
Solusi bagus. Saya akhirnya menambahkan background-repeat: no-repeat;saat $ berulang di kotak input.
Hamid Tavakoli

Karena browser dapat merender elemen input sebagai "elemen yang diganti" (misalnya sebagai widget asli sistem), ini berarti bahwa background-imagemungkin tidak didukung, atau browser mungkin merender widget itu sendiri daripada menggunakan widget yang disediakan sistem.
Dai

4

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>


3

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


1
Terima kasih! Saya menyadarinya, tetapi saya sebenarnya membutuhkan tanda mata uang saya untuk berada di dalam bidang teks. Ada jawaban yang lebih baik di bawah ini yang saya percaya dapat membantu banyak orang.
Pengguna3419

@Hristo: Saya senang Anda menemukan solusi yang sesuai. Namun sebagai catatan, orang yang Anda tandai sebagai jawabannya tidak memasukkan $ Anda di kolom input. Itu hanya membuatnya tampak ada di sana dengan gaya. Bisa dikatakan, itu pasti apik!
dnagirl

1
Ya, itu secara visual memecahkan masalah, sementara saran Anda hanya menunjuk (ya, masih ke arah yang benar), tetapi saya tidak akan menyebutnya sebagai solusi. Sekali lagi terima kasih dan ingat saya tidak bermaksud menyinggung siapa pun di sini!
Pengguna3419


2

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.


7
: before dan: after CSS pseudo selectors hanya dapat digunakan untuk tag penampung dan tidak berfungsi untuk tag masukan. stackoverflow.com/questions/2587669/…
Venkatesh Nannan

1

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


1

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

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

1
Saya tidak dapat mereproduksi ini di Chrome. Bisakah Anda memposting contoh JSFiddle yang berfungsi?
Dai

input tidak mendukung elemen pseudo di CSS3. Dengan kata lain tidak mungkin dengan CSS murni. Namun jika menggunakan jquery Anda dapat menggunakan $ ("input"). After ("$");
TaterJuice

0

Untuk bootstrap kerjanya

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

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


0

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>


Kode tanpa penjelasan tidak banyak membantu OP atau pemirsa yang akan datang dari jawaban ini. Anda harus menjelaskan bagaimana ini menjawab pertanyaan.
leigero

0

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


1
Tidak ada jawaban yang akan membantu karena bukan itu pertanyaan yang diminta. Simbol seharusnya berada di dalam input.
rybo111

Secara teknis, jawaban css juga tidak meletakkan tanda dolar di dalam wadah masukan. Saya pikir solusi css yang diterima memperkenalkan masalah penyelarasan yang rumit ketika diterapkan pada bentuk yang khas. Seperti yang terlihat di sini: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler

Saya telah memperbarui solusi ini untuk menempatkan tanda dolar di dalam input: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (posisi kiri absolut 5px dan atur arah input ke rtl)
Ted Scheckler

0

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

%


-1

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>

-1
.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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.