將值設置爲<input type =「number」/>

Question

中的貨幣我想將用戶輸入的數字格式化爲使用javascript的貨幣。這適用於<input type="text" />。不過，在<input type="number" />我似乎無法將該值設置爲包含非數字值的任何內容。下面撥弄顯示我的問題

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

反正對我來說，該值設置爲類似$125.00？

我想使用<input type="number" />，所以移動設備知道要爲鍵盤輸入提供一個鍵盤。

Answer 1

最後我做了一個jQuery插件，它將爲我適當地格式化<input type="number" />。我還注意到，在某些移動設備上，min和max屬性實際上並不會阻止您輸入比指定的數字更低或更高的數字，因此插件也會對此進行解釋。下面是代碼和一個例子：

(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

添加step="0.01"到<input type="number" />參數：

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

演示：http://jsfiddle.net/uzbjve2u/

但美元符號必須停留在文本框外......每一個非數字或分離charachter將被自動裁剪。您可以使用經典文本框like described here。

Answer 3

當類型設置爲「數字」時，瀏覽器僅允許數字輸入。 Details here。

您可以使用TYPE =「text」和使用JavaScript like descripted here

Answer 4

看來，你需要兩個字段，對於貨幣的選擇列表和編號字段不是數字輸入過濾掉其他任何值。

在這種情況下，常見的技術是使用div或跨度顯示（表單域offscreen），並點擊切換到表單元素進行編輯。

Answer 5

你們是完全正確的電話號碼只能在數字字段中去。我用的是同樣的事情與已經在span標記了CSS樣式的上市：

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

然後加一點造型魔法：

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