使用Rails允許/替換逗號作為輸入類型=“ number”的數字分隔符

Question

我正在使用Rails，並且具有以下內容：

<%= item.number_field :price, step: 0.01, class: "item_price" %>

結果為以下html：

<input step="0.01" class="item_price" name="something" id="something" type="number">

我的網站面向官方數字分隔符為“，”的保加利亞受眾

例如，很可能有人輸入“ 5,90”，但這不是有效數字，並且不會通過內置的Rails / html驗證。

我試圖用“。”代替逗號。 使用javascript，但似乎對於數字輸入字段，如果它不是有效數字，則根本無法獲得該值，而“ 5,90”則不是，因此我被卡住了。 我使用以下代碼：

$(document).ready(function(){
  $("input").keyup(function (){
    alert(this)
    alert(this.value)
    var v = this.value.replace(/,/g,'.');
    if (v!=this.value)
    this.value = v;
    alert(this.value)
  });
});

當我在字段中鍵入1時，警報說“ 1”，當我鍵入“ 1”時，警報為空。

我能想到的唯一可能的解決方案是將字段更改為文本字段，但是這樣一來，我將放棄所有不錯的rails extras，所以我想避免這種情況。

我想要的是將“ 5,90”與“ 5.90”相同。 用戶輸入中的任何一個都應該有效。

歡迎使用任何Javascript，JQuery或Rails解決方案。 精細

更新：在Chrome上，我什至不允許在該字段中鍵入“，”，這不是很好，因為我按了鍵盤上的逗號，而且什么也沒有發生，不好的UX

我的初始測試是在FF上進行的，我可以在其中輸入“逗號”，但它無效

在Android中，內置瀏覽器：我得到數字鍵盤，其中只有“。”。 存在，沒關系

Answer 1

我做了一些研究，這是一個超級有趣的話題。 奇怪的是，默認情況下將使用本地約定，但瀏覽器會將其轉換為點十進制分隔符。 例如，如果您來自保加利亞，則在輸入中輸入5,90：

$(document).ready(function(){
  $("input").keyup(function (){
    console.log(this.value); // will still log 5.90 (dot separator)
  });
});

總結起來，在兩種情況下，如果英國人寫5.90，或者保加利亞人寫5.90，則輸入的JavaScript值為5.90。

無論出於何種原因，如果您想知道使用哪個十進制分隔符的客戶端，此函數都會返回其十進制分隔符：

function whatDecimalSeparator() {
    var n = 1.1;
    n = n.toLocaleString().substring(1, 2);
    return n;
}

在這里查看更多

Answer 2

在input元素中處理用戶輸入時，請使用input事件，而不要使用keyup 。 只要更改值（通過擊鍵，右鍵單擊和粘貼，瀏覽器提供的增/減按鈕等），就會觸發input 。

然后，在支持type="number"的瀏覽器中，使用valueAsNumber訪問數字值。 您可以可靠地返回value以訪問字段中的文本，然后進行操作。

所以：

$(document).ready(function(){
  $("input").on("input", function (){                  // `input` event
    var value;
    if ("valueAsNumber" in this) {                     // Use `valueAsNumber` if provided
        value = this.valueAsNumber;
    } else {
        value = +this.value.trim().replace(/,/g, "."); // Use `value` if not, convert to num
    }
    console.log(value);
  });
});

（請注意，有很多方法可以轉換為數字；我已經使用了上面的一元+ 。有關詳細信息，請參見此答案 。）

Answer 3

您可以在Ruby中的控制器操作中進行更改：

params[:myparam] = params[:myparam].gsub(',','.').to_f

但是您也可以使用before_validation掛鈎將其添加到模型中。

用Ruby進行操作很方便，因為：

• 它是后端。 因此，您不必擔心前端更改是否成功。 例如，當瀏覽器中禁用javascript時
• 如果這是您所在國家/地區的官方分隔符，則允許在瀏覽器中保留逗號。

Answer 4

這是我在問題上的發現，即使尚未完全解決，但它們是純HTML，與Rails無關。 這是關於此事的非常好的文章： https : //www.w3.org/International/wiki/Locale-based_forms 。

因此，我發現的部分解決方案是添加“ lang” =>“ bg-BG”（Rails代碼）/ lang =“ bg-BG”（html）：

<%= item.number_field :price, step: 0.01, class: "item_price", "lang" => "bg-BG" %>

它的作用：在FF中：

• 它接受“，”和“。” 作為小數點分隔符，這很棒！

• 它用“，”顯示已經保存的數字，例如“ 5,89”，我不太喜歡，但實際上是正確的

  在GChrome和Android內置瀏覽器中：

• 它沒有任何作用，至少我找不到任何東西

這是另一篇非常不錯的文章，以及一個表格，顯示了哪個操作系統支持哪個瀏覽器： https : //www.ctrl.blog/entry/html5-input-number-localizatione

結論：由於瀏覽器支持不好，而且絕對不一致，因為當前FF使用率很低，但是GChrome的行為（在鍵入時會默默地省略逗號）太可怕了，我將不得不要么切換到文本字段並為驗證/解析等做一些自定義魔術，或者只是保留默認行為並讓用戶討厭我。