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附加功能，因此我想避免这种情况。

我想要的是将“ 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;
}

查看更多here

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

（请注意，有很多方法可以转换为数字；我使用了上面的一元+。有关详细信息，请参见this answer。）

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的行为（在键入时会默默地省略逗号）简直太可怕了，我必须要么切换到文本字段并做一些自定义魔术以进行验证/解析等。或者只是保留默认行为，让用户讨厌我。

使用Rails允许/替换逗号作为输入类型=“ number”的数字分隔符

4 个答案: