Is there a way to implement on keyup event except one key?

Question

I'm trying to develop a Javascript function that do some verification every time an input change (I'm using onkeyup event) except when we delete what we enter inside the input. Here is my actual code:

function myFunction() {
var input, filter, table, tr, td, i;
var cpt = 0;
var nbRow = 0;
input = document.getElementById("filterInput");
filter = input.value.toUpperCase();
table = document.getElementById("test");
thead = table.getElementsByTagName("tbody");
tr = table.getElementsByTagName("tr");

for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];

    if (td) {
        nbRow = nbRow + 1;
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
            cpt = cpt + 1;

        }
    }
}
if (nbRow == cpt) {
   alert("The list is empty")
}
}

<input id="filterInput"  onkeyup="myFunction()">
<table id="test">
<thead>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenu1</td>
<td>contenu2</td>
<td>contenu3</td>
</tr>
</tbody>

</table>

How can I avoid a repetitive alert show everytime a user deletes one character?

EDIT :

I'm trying to avoid repetitive 'alert' without losing the verification after the user deletes one character.

Possible duplicate of [Simple throttle in js](https://stackoverflow.com/questions/27078285/simple-throttle-in-js) — Jared Smith, Oct 12 '17 at 12:41

score 4 · Accepted Answer · answered Oct 12 '17 at 12:45

If you want to ignore delete and backspace with onkeyup, you can add this check to the beginning of your function:

function myFunction(event) {
    // capture what key was pressed
    var key = event.keyCode || event.charCode;

    if( key === 8 || key === 46 )
        return; //if it's del or backspace, exit the function

    // continue your function here
}

Renzo Calla · Answer 2 · 2017-10-12T12:46:19.447

1

You can implement a validation in the function detecting which key was pressed...

function myFunction(e) {
   if(e.keyCode !== 8){ // back key excluded
         var input, filter, table, tr, td, i;
    var cpt = 0;
    var nbRow = 0;
    input = document.getElementById("filterInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("test");
    thead = table.getElementsByTagName("tbody");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
     td = tr[i].getElementsByTagName("td")[2];

     if (td) {
      nbRow = nbRow + 1;
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
       tr[i].style.display = "";
      } else {
       tr[i].style.display = "none";
       cpt = cpt + 1;

      }
     }
    }
    if (nbRow == cpt) {
alert("The list is empty")
    }
   }
    
}

<input id="filterInput"  onkeyup="myFunction(event)">
<table id="test">
<thead>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenu1</td>
<td>contenu2</td>
<td>contenu3</td>
</tr>
</tbody>

</table>

Of course you would have to add the code for every key you want to exclude

edited Oct 12 '17 at 12:46

answered Oct 12 '17 at 12:44

Renzo Calla

7,486
2
22
37

You'll probably getting problem on mobile devices. Maybe better check for the string length of last event. – kevinSpaceyIsKeyserSöze Oct 12 '17 at 12:59
It work well on firefox for mobile !! why do you think not ? – Atimene Nazim Oct 12 '17 at 13:02
Simple And efficient ! Just one thing, when you delete you lose the verification ! – Atimene Nazim Oct 12 '17 at 13:05
1

I experienced lack of keyCode in some mobile browsers. Just be carefull – kevinSpaceyIsKeyserSöze Oct 12 '17 at 13:07
@ kevinSpaceyIsKeyserSöze Thanks!! – Atimene Nazim Oct 12 '17 at 13:09

Is there a way to implement on keyup event except one key?

2 Answers2