Cara Membatasi Karakter Tertentu saat Input dengan JavaScript

www.gurudzgn.com - Hi web developer, kembali lagi bersama guru design kali ini kita akan membahas tentang bagaimana cara membatasi karakter pada saat input.

Cara Membatasi Karakter Tertentu saat Input dengan JavaScript

 Misal kita akan membuat sebuah projek yang memiliki form input dengan ketentuan:

• Form hanya bisa di input dengan huruf 1 2 dan 3

Artinya form tersebut tidak bisa di input karakter lain selain 1 2 dan 3.

Untuk membuat form seperti di atas maka kita tuliskan program seperti berikut ini:

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

Ket: amati kode yang saya tulis di atas, pada bagian tag <input>, terdapat attribute onkeypress dengan value berupa function checkInput(event,’123′,this) yang artinya form input hanya bisa di input huruf 123 saja.

Begini demonya:

Biasanya kode diatas tidak berjalan menggunakan browser chrome, kamu kamu bisa gunakan  code ini sebagai alternative:

<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>

Begini demonya:

Atau jika kamu ingin menggunakan JQuery maka rubah codenya menjadi seperti ini:

<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>

Begini demonya:

Sekian Cara Membatasi Karakter Tertentu saat Input dengan JavaScript, semoga bermanfaat terimakasih.