无法从 HTML 输入类型号（包括点（。））获取原始值答案

【问题标题】：Cannot get raw value from (including dot(.)) from HTML input type number无法从 HTML 输入类型号（包括点（。））获取原始值
【发布时间】：2021-06-24 23:43:57
【问题描述】：

当我点击输入 <input type="number" id="n" /> 时；在输入的keypress 函数上键入一些键。然后输入.，虽然它显示在输入中，但我在$('#n').val() 中看不到.。

例如输入后：123. 然后$('#n').val() 只返回123。

<input type="number" /> 是否有任何属性可以让我得到它的raw value，即123. 而不是123？

$("#n").on("keypress", function(event) {
  console.log($("#n").val());
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<input type="number" pattern="[0-9]{1,2}([\.][0-9]{1,2})?" id="n" step="0.01" />

JSbin demo

更新：

input 必须具有类型 number 才能使其仅在移动网络的软键盘上显示数字输入。
它应该检查模式 99.99 并按如下方式工作：
1. 当输入 9 OK // 输入：9
2. 类型 9 OK // 输入：99
3. 类型 9 否，它不匹配模式 // 输入：99
4. 然后输入 1 NO，它不匹配模式 // 输入：99
5. ..在此处输入任何内容而不是点（.）...
6. type dot(.) OK // 输入：99.
7. 类型 9 OK // 输入：99.9
8. 类型 9 OK // 输入：99.99
9. 类型 9 NO // 输入：99.99

如果不检测存在点（。）如何检测连续输入多个.的情况？

【问题讨论】：

使用keyup事件
@Satpal: keyup 不起作用jsbin.com/korofateji/1/edit?html,js,console,output
123. 是123，为什么需要句号？怀疑你会得到它，因为没有真正的方法可以得到原始价值。
@epascarello：因为我想每次都用这个信息来限制输入数字。即：在 dot(.) 123.4 之后只允许 1 个数字 - 因此必须检测到 . 的存在
所以 .在他们添加一个数字后会在那里。您遇到的问题是输入数字会为您解析它，因此您无法控制。您可以监听关键事件并查看值是什么，但不能读取值。

标签： javascript jquery html

【解决方案1】：

我自己之前也遇到过这个问题。也许这会有所帮助：

$("#n").on("keyup", function(event){
  var val = $('#n').val();
  if(event.keyCode == 190) {
    val+='.';
  }
  console.log(val);
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<input type="number" id="n" />
</body>
</html>

【讨论】：

只有在粘贴、删除键的情况下问题才会失败
对不起，但是如何在编辑操作后跟踪点（.）。即删除点（.）然后再次添加......就像上面提到的@epascarello。
@o0omycomputero0o 一旦你有了点，你就可以分割字符串并检查小数点后部分的长度是否为 2
@epascarello 我会看到

【解决方案2】：

<input type="number"
       min="0"
       max="999"
       step="0.000001"
       pattern="[0-9]{1,2}([\.][0-9]{1,2})?" 
       id="n" />

这应该可以解决您的问题。 Use FocusOut event to capture the value

【讨论】：

@epascarello ：对我来说它的工作。这是我在 Safari 浏览器中测试的小提琴链接jsfiddle.net/o2gxgz9r/5444。

【解决方案3】：

为了从数字类型的输入中获取值，当值以点结尾时，您需要使用需要监听“onKeyUp”事件的 hacky 解决方案。这种行为是有意的，因为数字输入应该只返回有效数字。

这是我描述的解决方案的实现：

const resultContainer = document.querySelector("#result");
let value = null;

const updateValue = (event) => {
  const DOT_KEY_CODE = 190;
  const BACKSPACE_KEY_CODE = 8;

  let newValue = event.currentTarget.value;
  if (newValue === "" || newValue === null) {
    if (event.keyCode === DOT_KEY_CODE) {
      newValue = value.toString() + ".";
    } else if (event.keyCode === BACKSPACE_KEY_CODE) {
      const valueParts = value.toString().split(".");
      const DECIMAL_PART = 1;
      const decimalPlaces = valueParts.length > 1 ? valueParts[DECIMAL_PART].length : 0;
      const LAST_DECIMAL_PLACE = 1;
      if (decimalPlaces === LAST_DECIMAL_PLACE) {
        const REMOVE_ONE_CHAR = 1;
        newValue = value.toString().substring(0, value.toString().length - REMOVE_ONE_CHAR);
      }
    }
  }

  value = newValue;
  resultContainer.innerHTML = newValue;
};

<input type="number" onKeyUp="updateValue(event)" />
<div>Received value: <span id="result"></span></div>

【讨论】：