Question

在此处找到答案： https://stackoverflow.com/a/18853513/983173 此外，请参阅下面的更新。

奇怪的行为我整天都在摔跤。我非常希望能够在使用我的网站时为我的网站的移动用户提供数字小键盘，作为他们的快捷方式。我已经通过将我的HTML输入类型设置为'number'来实现这一点，如下所示：

<input id='blah' class='blah' type='number' placeholder='blah'>

这很有用，但我仍然希望该网站对PC用户来说看起来不错，所以当你将HTML输入类型改为'number'时，我必须找到帮助删除PC浏览器添加的微调按钮，所以我在CSS中添加了这个：

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

这也有效，所以现在我输入了类型号的HTML文本输入，这样移动用户就会自动获得数字小键盘而PC用户不会看到丑陋的微调器。然而此时，我无法输入小数'。'在PC浏览器中我的文本字段中的字符。它适用于移动设备但不适用于PC。当我击中'。'时键，我实际上看到小数出现在文本区域，然后消失，但在输入元素上使用事件监听器，监听'keyup'事件，文本输入的值永远不会反映'。'正在输入的字符。

我错过了什么？

更新：将这些HTML和CSS元素复制到隔离区后（zer00ne谢谢），我已将问题跟踪到我的JavaScript，并在那里执行数字输入类型{{特别是1}}成员。我的JavaScript是拉取数字输入的值，用它做一些字符串工作，然后把它放回去。出于某种原因，我无法检测到尾随的十进制字符'。'在输入字段的屏幕可见文本中，所以当我拉出数字输入的值时，每次我输入之前它都会丢弃小数，然后再将它放回去。有没有其他方法可以检测数字输入中的尾随小数或获取原始值以便我可以看到它？

Answer 1

<强>更新

我看到你现在在说什么，当我输入小数时，输出消失了。幸运的是，当您在小数点右侧输入任何数字时，它会重新出现。因此它可能会将该句点（“。”）解释为字符串的一部分，直到它被有效数字包围。

我对你的代码进行了测试，并使用输入事件来查看十进制值是否结转并且看起来像是这样。我错过了什么吗？

在Windows 8 Firefox和Chrome上测试

var num = document.getElementById('num');
num.addEventListener('input', function(e) {
  var out1 = document.getElementById('out1');
  out1.value = num.value;
}, false);

input[type='number'] {
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<input id='num' class='num' type='number' placeholder='Number' />

<output id="out1"></output>

Answer 2

在这里找到答案：https://stackoverflow.com/a/18853513/983173

简而言之，数字类型输入被指定为在使用numberInput.value时返回数值而不是字符串。

换句话说，如果用户在数字输入中键入42.，并且JS在该输入上调用numberInput.value，则浏览器将按设计返回42作为数字，而不是“42”。作为一个字符串。 因为如果你正在使用数字，那么规范假定，你永远不想知道最后是否有小数。你无法访问数字输入的“原始”字符串值（换句话说，无法检测尾随的十进制数），也没有解决办法，除非你想要进行密钥捕获或其他不方便的工作来处理和跟踪小数的存在，这是我最终必须做的。

我将尝试更新问题以使其更加清晰。

键入的十进制数从浏览器中“数字”类型的HTML文本输入中消失

2 个答案: