Saya mencoba untuk mendapatkan benar/salah menggunakan .includes(".") pada jenis input nomor.

Dalam cuplikan saya, saya selalu mendapatkan bahwa nilainya selalu salah dalam melihat apakah nilainya TIDAK memiliki desimal. Berarti angka seperti "2" DAN "2." membawa kembali hasil yang sama. Ketika "2." harus jatuh ke ELSE karena memang mengandung desimal.

Jika saya mengubah tipe input menjadi "teks" semua berfungsi seperti yang diharapkan, tetapi ketika saya mengubah tipe menjadi angka, .includes(".") tidak melihat nilai input memiliki desimal.

Seharusnya sederhana, tapi saya belum bisa melewatinya. Saya suka menggunakan input "angka" untuk batasan browser bawaan dari input angka saja.

Setiap bantuan atau petunjuk dihargai.

Jadi saya punya sesuatu seperti ini:

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">
-1
ClosDesign 28 Oktober 2019, 22:55

2 jawaban

Jawaban Terbaik

Masalah yang akan Anda hadapi dengan input type="number" adalah bahwa ini hanya mengizinkan angka yang valid, jadi jika pengguna memasukkan 2., yang Anda dan saya tahu tidak valid, kontrol akan melihatnya sebagai 2 yang valid. includes tidak akan pernah mengambil ..

document.querySelector("input").addEventListener("input", function(){
   console.log(this.value);  // 2 not 2.1
});
Type 2. and watch the console output <input type="number">

Untuk mendapatkan perilaku yang Anda inginkan, Anda harus menggunakan input teks biasa, dan memeriksa karakter buruk pada keydown dan memvalidasi input pada 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>
1
Scott Marcus 28 Oktober 2019, 22:39

Anda dapat mengambil input dari DOM Anda, mengubahnya menjadi string, melakukan perbandingan termasuk desimal, dan mengubahnya kembali menjadi float atau integer tergantung pada hasil perbandingan.

EDIT: Memahami pertanyaan dengan jelas.

-2
alex067 28 Oktober 2019, 20:45