javascript - 查找小数时，使用 .includes() 输入 type="number" 为 false

Question

我试图在输入类型的数字上使用 .includes(".") 获得真/假。

在我的片段中，在查看该值是否没有小数时，我总是得到该值总是错误的。表示像“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">

标签： javascripthtmlinput

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>