获取数字输入字段的输入值，而不是解析的 [英] Get the entered value on number input field, not the parsed

问题描述

我在下面的字段上进行输入验证，我想设置一个默认值。我的意思是默认值是我想为输入字段设置一些值，如果该字段为空。

 （）; inputBox.addEventListener（keydown，function（e（））; ）{validateInput（this，e）;}）; function validateInput（elm，e）{//处理keydown事件if（e）{//不允许使用浮点数，如果不是这样，if（！isFloat（elm .step））{if（e.key ==。）{e.preventDefault（）; }}} //处理输入事件else {//不允许前导零（elm.value.length> 1&& elm.value [0] ===0）{elm.value = elm 。.value.toString（）片（1）; } //输入应该在min和max之间if（elm.validity.rangeUnderflow）{elm.value = elm.min; } else if（elm.validity.rangeOverflow）{elm.value = elm.max; }}}函数isFloat（x）{var f = parseFloat（x）; var floor = Math.floor（f）; var fraction = f  -  floor; if（fraction> 0）{return true; }返回false;}  

< input type =number id =inputBoxmin =0max =16581375step =1value =0/>

在一个非常直接的方法中，我可以将以下内容添加到 validateInput（）

  //设置默认值，不允许使用空字段
 if（elm.value ==）{
 elm.value = elm.min; 
} 
  

但是这打破了一些功能。例如，我不能输入指数值（例如 1e + 5 ）。

输入字段在输入时会自行检查。当我输入 1e 时，它的计算结果为 NaN 和值元素的属性设置为，但在视觉上， 1e 仍然在该字段中输入。所以，你看，输入的值和 HTMLInputElement.value 可能不同。

为了能够设置默认值，我应该能够检查输入的值，而不是元素解析的值。像这样的东西可能会工作：

  //设置默认值，不允许使用空字段
 if（elm .value ==&&！elm.stringValue.includes（e））{
 elm.value = elm.min; 
} 
  

但是，当然没有 stringValue 属性。我可以想到解决此问题的一种方法是使用文本输入字段并对数字进行额外的验证。

有没有一种方法可以使用数字输入字段进行工作？

解决方案

看起来您需要将指数值解析为数字。

我认为，此解决方案应该可以帮助您： https://stackoverflow.com/a/18719988/6420563

这个解决方案用于文本字段，但我认为它也可用于输入号码。

I'm doing input validation on the following field and I want to set a default value. What I mean by default value is I want to set some value to input field if the field is empty.

var inputBox = document.getElementById("inputBox");

inputBox.addEventListener("input", function() {
  validateInput(this);
});

inputBox.addEventListener("keydown", function(e) {
  validateInput(this, e);
});

function validateInput(elm, e) {
  // handle keydown event
  if (e) {
    // do not allow floating-point numbers, if it's not expected
    if (!isFloat(elm.step)) {
      if (e.key == ".") {
        e.preventDefault();
      }
    }
  }
  // handle input event
  else {
    // do not allow leading zeros
    while (elm.value.length > 1 && elm.value[0] === "0") {
      elm.value = elm.value.toString().slice(1);
    }
    // input should be between min and max
    if (elm.validity.rangeUnderflow) {
      elm.value = elm.min;
    } else if (elm.validity.rangeOverflow) {
      elm.value = elm.max;
    }
  }
}

function isFloat(x) {
  var f = parseFloat(x);
  var floor = Math.floor(f);
  var fraction = f - floor;
  if (fraction > 0) {
    return true;
  }
  return false;
}

<input type="number" id="inputBox" min="0" max="16581375" step="1" value="0" />

In a very straightforward approach, I can add the following to the end of validateInput()

// set default value, empty field isn't allowed
if (elm.value == "") {
    elm.value = elm.min;
}

but this breaks some functionality. For example, I can't enter exponential values (e.g. 1e+5).

Input field does its own check at input. The moment I enter 1e, it evaluates to NaN and the value property of the element is set to "", but visually, 1e is still entered on the field. So, you see, the entered value and the HTMLInputElement.value might differ.

To be able to set a default value, I should be able to check the entered value, not the parsed one by the element. Something like this would probably work:

// set default value, empty field isn't allowed
if (elm.value == "" && !elm.stringValue.includes(e)) {
    elm.value = elm.min;
}

But of course, there's no such stringValue property. One way I can think of to get around this problem is to use a text input field and do an extra validation for number.

Is there a way to make this work with number input field?

解决方案

Looks like you need to parse exponential values into numbers.

I think, this solution should help you: https://stackoverflow.com/a/18719988/6420563

This solution made for text field but i think it will also work for number input.

这篇关于获取数字输入字段的输入值，而不是解析的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！