Pertanyaan Setel nilai ke mata uang di


Saya mencoba memformat input angka oleh pengguna ke dalam mata uang menggunakan javascript. Ini berfungsi dengan baik <input type="text" />. Namun, aktif <input type="number" /> Sepertinya saya tidak dapat mengatur nilai untuk apa pun yang mengandung nilai-nilai non-numerik. Teka-teki berikut menunjukkan masalah saya

http://jsfiddle.net/2wEe6/72/

Apakah ada pula bagi saya untuk menetapkan nilai untuk sesuatu seperti $125.00?

Saya ingin menggunakannya <input type="number" /> sehingga perangkat seluler tahu untuk memunculkan keyboard untuk input angka.


43
2018-02-01 16:38


asal


Jawaban:


Menambahkan step="0.01" ke <input type="number" /> parameter:

<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />

Demo: http://jsfiddle.net/uzbjve2u/

Tetapi tanda Dollar harus tetap berada di luar kotak teks ... setiap karakter non-numerik atau pemisah akan dipotong secara otomatis.

Kalau tidak, Anda bisa menggunakan kotak teks klasik, seperti yang dijelaskan di sini.


49
2018-02-01 16:44



Pada akhirnya saya membuat plugin jQuery yang akan memformat <input type="number" /> tepat untukku. Saya juga memperhatikan pada beberapa perangkat seluler min dan max atribut sebenarnya tidak mencegah Anda memasukkan angka yang lebih rendah atau lebih tinggi dari yang ditentukan, sehingga plugin juga akan bertanggung jawab untuk itu. Di bawah ini adalah kode dan contohnya:

(function($) {
  $.fn.currencyInput = function() {
    this.each(function() {
      var wrapper = $("<div class='currency-input' />");
      $(this).wrap(wrapper);
      $(this).before("<span class='currency-symbol'>$</span>");
      $(this).change(function() {
        var min = parseFloat($(this).attr("min"));
        var max = parseFloat($(this).attr("max"));
        var value = this.valueAsNumber;
        if(value < min)
          value = min;
        else if(value > max)
          value = max;
        $(this).val(value.toFixed(2)); 
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('input.currency').currencyInput();
});
.currency {
  padding-left:12px;
}

.currency-symbol {
  position:absolute;
  padding: 2px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />


12
2018-02-05 16:33



Kalian benar-benar angka yang benar hanya bisa masuk dalam bidang angka. Saya menggunakan hal yang sama persis seperti yang sudah terdaftar dengan sedikit gaya css pada tag span:

<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">

Kemudian tambahkan sedikit sihir styling:

span{
  position:relative;
  margin-right:-20px
}
input[type='number']{
  padding-left:20px;
  text-align:left;
}

7
2017-10-29 23:06



Tampaknya Anda akan membutuhkan dua bidang, daftar pilihan untuk mata uang dan bidang angka untuk nilainya.

Teknik umum dalam hal ini adalah menggunakan div atau span untuk tampilan (bidang formulir di luar layar), dan pada sakelar klik ke elemen formulir untuk diedit.


3
2018-02-01 16:50



Browser hanya memungkinkan input numerik ketika jenisnya diatur ke "angka". Detail di sini.

Anda dapat menggunakan type = "text" dan menyaring input selain yang lainnya menggunakan JavaScript seperti yang dideskripsikan di sini


0
2018-02-01 16:46