Ustaw wartość waluty w <typ wejściowy = "liczba" />

Question

Próbuję sformatować dane liczbowe wprowadzane przez użytkownika do waluty przy użyciu javascript. To działa dobrze na <input type="text" />. Jednak na <input type="number" /> nie mogę wydawać się być w stanie ustawić wartość do niczego, która zawiera wartości nieliczbowe. Poniższa skrzypce pokazuje mój problem

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

Czy mimo to dla mnie, aby ustawić wartość na coś $125.00?

Chcę użyć <input type="number" />, więc urządzenia mobilne wiedzą, aby wyświetlić klawiaturę do wprowadzania liczb.

Answer 1

W końcu zrobiłem wtyczkę jQuery, która odpowiednio sformatuje <input type="number" /> dla mnie. Zauważyłem też, że na niektórych urządzeniach przenośnych atrybuty min i max w rzeczywistości nie uniemożliwiają wprowadzenia niższej lub większej liczby niż podana, więc wtyczka również to uwzględni. Poniżej znajduje się kod i przykład:

(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" />

Answer 2

Dodaj step="0.01" parametrów <input type="number" />:

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

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

Ale znak dolara musi pozostać na zewnątrz pola tekstowego ... każdy nienumeryczny lub separator charachter zostanie przycięty automatycznie.

W przeciwnym razie można użyć klasycznego pola tekstowego, like described here.

Answer 3

Przeglądarka dopuszcza tylko wejścia numeryczne, gdy typ jest ustawiony na "numer". Details here.

Można użyć type = „text” i odfiltrować wszelkie inne niż wejścia numerycznego przy użyciu JavaScript like descripted here

Answer 4

Wydaje się, że trzeba dwa pola, listę wyboru dla waluty oraz pole numer dla wartość.

Powszechną techniką w takim przypadku jest użycie div lub span dla wyświetlania (pola formularza poza ekranem), a po kliknięciu przełącz do elementów formularza do edycji.

Answer 5

Jesteście całkowicie właściwe numery mogą iść tylko w polu numerycznym. Używam dokładnie to samo, co już notowane z odrobiną css stylizacji na tagu Okres:

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

Następnie dodać trochę stylizacji Magic:

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