带小数点分隔符的 HTML 数字输入问题答案

【问题标题】：HTML number input issues with decimal seperator带小数点分隔符的 HTML 数字输入问题
【发布时间】：2021-09-14 06:13:45
【问题描述】：

我在 iOS 上使用数字键盘输入十进制时遇到了一些问题。我有以下 HTML：

$('#number').keyup(function() {
  $('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" inputmode="decimal" id="number">
<p>
  Input as number:
  <div id="log"></div>
</p>

这在 Chrome 浏览器、Android 等中按预期工作，但在 iOS 上存在一些问题。如果我将 Region 设置为例如丹麦（逗号小数分隔符）但语言为英语（英国）（小数点分隔符），数字键盘给了我一个逗号小数分隔符，但我似乎 HTML /JS 不支持这个。如果我输入例如12,3使用逗号时输入字段的值变为空。

我该如何解决这个问题？

当 Region 为 Denmark 且 Language 为 Danish 时，一切正常。

代码和演示可在 StackBlitz 上获得：https://decimal-input-ios.stackblitz.io

【问题讨论】：

问题出现在 iOS 上的特定浏览器还是所有浏览器上？你试过 iOS Firefox 还是 Chrome？
@3limin4t0r iOS 总是使用相同的浏览器引擎。无论您使用哪种浏览器，它始终是 webpack。所以错误通常存在于所有 iOS 浏览器上

标签： javascript html jquery ios

【解决方案1】：

使用parseFloat() 使值变为浮点数

$('#number').keyup(function() {
  $('#log').prepend('<p>Input: ' + parseFloat($(this).val()) + '</p>');
});

<html lang="en-GB">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" inputmode="decimal" id="number">
<p>
  Input as number:
  <div id="log"></div>
</p>
</html>

【讨论】：

【解决方案2】：

由于我没有任何 IOS 设备，所以无法测试...

但你说：

当 Region 为 Denmark 且 Language 为丹麦语时，一切正常。

那么为什么不直接更改特定输入 focus 上的整个页面语言并在 blur 上恢复它呢？那将是：

$("#number").on("focus", function(){
  $("html").attr("lang", "da");
});

$("#number").on("blur", function(){
  $("html").attr("lang", "en");
});

值得一试;)

【讨论】：

【解决方案3】：

这是一个作弊，但是在阅读了several 类似的posts 之后，我不确定你有太多选择。如果您不需要（通常无关紧要的）向上/向下刻度，您可以只使用带有模式的“文本”输入。尽管这是一个“文本”输入，但该模式会告诉 iOS 使用数字键盘。

$('#number').keyup(function(evt) {
  $('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" inputmode="decimal" id="number" pattern="[0-9.,]+">
<p>Input as number:</p>
  <div id="log"></div>

【讨论】：

OP 绝对需要输入类型编号才能使用正确的屏幕键盘。 ;)

【解决方案4】：

我找到了一些解决方法，您可以将 , 替换为 .每次输入时：

let prevNum = "";

$('#number').on("keyup", function (e) {
    if (e.keyCode == 188) {
        $(this).val(prevNum + ".");
    }
    
    prevNum = $(this).val();

    $('#log').prepend('<p>Input: ' + $(this).val() + '</p>');
});

【讨论】：

【解决方案5】：

您能否尝试添加`lang="en"` 它应该通过添加`lang` 属性来改变

<input type="number" inputmode="decimal" id="number" lang="en">

【讨论】：

input 没有 lang 属性。

您能否尝试添加lang="en" 它应该通过添加lang 属性来改变

您能否尝试添加`lang="en"` 它应该通过添加`lang` 属性来改变