Membatasi karakter tertentu saat input dengan javascript

Beberapa kasus saat membuat project, kita ingin saat menginput pada sebuah form hanya beberapa karakter saja yang diperbolehkan.

Misalkan sebuah form yang hanya dapat diisi dengan angka saja atau huruf tertentu.

Untuk melakukan hal tersebut kita dapat membuat kode berikut

<input type="text" onkeypress="return checkInput(event,'123',this)">

<script type="text/javascript">
  function checkInput(e,chars,field){
    if (chars.indexOf(e.key) != -1){
      return true;
    }else{
      return false;
    }
  }
</script>

Demo

Perhatikan kode di atas, pada tag <input>, terdapat attribute onkeypress dengan value berupa function checkInput(event,’123′,this).

Pada function tersebut, terlihat argumen kedua saya memasukkan angka 123. Jika kode di atas dijalankan, kita tidak dapat menginput dengan karatker apapun selain 1,2 dan 3.

Ubah argumen kedua sesuai karakter yang ingin kalian perbolehkan untuk dilakukan penginputan.

Pada browser chrome di Android, kode di atas tidak dapat berjalan semestinya.

Berikut kode alternatif untuk mengatasi masalah pada chrome di Android

<input type="text" onkeyup="return checkInput(event,'123',this)">

<script type="text/javascript">
  function checkInput(e,chars,field){
    let teks = field.value;

    let teksSplit = teks.split("");
    let teksOke = [];

    for(let i=0;i<teksSplit.length;i++){
      if(chars.indexOf(teksSplit[i])!=-1){
        teksOke.push(teksSplit[i]);
      }
    }

    field.value = teksOke.join("");
  }
</script>

Demo

Jika ingin menggunakan Jquery. Kita dapat membuat kodenya menjadi seperti di bawah

<input type="text" id="textInput">

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
 
  $('input#textInput').on('keyup',function(e){
    let teks = $(this).val();
    let charAggree = "123";
    
    let teksSplit = teks.split("");
    let teksOke = [];

    for(let i=0;i<teksSplit.length;i++){
      if(charAggree.indexOf(teksSplit[i])!=-1){
        teksOke.push(teksSplit[i]);
      }
    }

  $(this).val(teksOke.join(""));		
  });
</script>

Demo