Question

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

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

<input type="number" />的任何属性是否可以raw value 123.而不是123？

＆＃13;

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

＆＃13;

<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" />

＆＃13;

JSbin demo

更新：

input必须具有类型编号，以便仅在移动网络上的软键盘上显示数字输入。
应检查模式99.99并按以下方式工作：
1. 当键入9 OK //输入：9
2. 键入9 OK //输入：99
3. 输入9 NO，它与模式//输入不匹配：99
4. 然后输入1 NO，它不匹配模式//输入：99
5. ..免费输入任何内容而不是点（。）这里......
6. type dot（。）OK //输入：99。
7. 键入9 OK //输入：99.9
8. 类型9确定//输入：99.99
9. type 9 NO //输入：99.99

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

Answer 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>

Answer 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

Answer 3

为了从类型为 numeric 的输入中获取值，当值以点结尾时，您需要使用一种要求您侦听 '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>

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

3 个答案: