Question

我试图在输入类型的数字上使用.includes（“。”）获得对/错。

在我的代码段中，我总是会发现该值始终为false，以查看该值是否没有小数。意思是像“ 2”和“ 2”这样的数字。带回相同的结果。当“ 2”。应该属于ELSE，因为它确实包含小数。

如果将输入类型转换为“文本”，则所有功能均按预期工作，但是当我将输入类型转换为数字时，.includes（“。”）不会将输入值视为带有小数。

应该很简单，但我一直无法克服。我喜欢将“数字”输入用于仅数字输入的内置浏览器限制。

任何帮助或指针都将受到赞赏。

所以我有这样的东西：

var e = document.getElementById("numberBox");
$('#submitBtn').prop('disabled', true);
$(e).on("keyup", function(){
var newValue = this.value;
   checkIt(newValue);
});



function checkIt(newValue){

if(newValue >= 1 && !newValue.includes(".")){

  //if entering "2." this should not fire, but does if input type is number.
       $('#submitBtn').attr('disabled', false);
     console.log("TRUE: value does not include a decimal. Value is:" + newValue + ", value type is: " + typeof newValue);
  }else{
  $('#submitBtn').attr('disabled', true);
  console.log("FALSE: value includes a decimal. Value is: " + newValue + ", value type is: " + typeof newValue);
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="number" id="numberBox" value=""/>
<input id="submitBtn" type="submit" value="Submit">

Answer 1

您将遇到input type="number"的问题是它仅允许有效数字，因此如果用户输入2.（您和我知道这是无效的），则控件将看到就像2一样有效。 includes永远不会拿起.。

document.querySelector("input").addEventListener("input", function(){
   console.log(this.value);  // 2 not 2.1
});

Type 2. and watch the console output <input type="number">

要获得所需的行为，您需要使用常规的文本输入，并检查keydown上的错误字符并验证keyup上的输入。

let input = document.querySelector("input");

input.addEventListener("keydown", function(evt){
  // prevent non-numeric chars, but allow BACKSPACE and DELETE
  let nums = /^\d+|\./g;
  let valid = nums.test(evt.key);
  
  // If the input is not valid, backspace, delete or the left/right arrow keys....
  if(!valid && evt.code != "Backspace" && evt.code != "Delete" && 
         evt.code != "ArrowLeft" && evt.code != "ArrowRight"){
      evt.preventDefault();
  }
});

input.addEventListener("keyup", function(evt){
  let reg = /^(-?\d+\.\d+)$|^(-?\d+)$/gm; // RegExp to test for valid nummber
  let valid = reg.test(input.value);      // Test the input
  input.setCustomValidity(valid ? "" : "Invalid!"); // Set validity    
});

input:invalid { border:2px solid red; }
input:valid { border:2px solid green; }

<input>

Answer 2

您可以从DOM中获取输入，将其转换为字符串，执行十进制包含比较，然后根据比较结果将其转换回浮点数或整数。

编辑：清楚地理解了这个问题。

查找十进制时，使用.includes（）输入type =“ number”为false

2 个答案: