CODEWITHSUNDEEP
javascripthtmldom-events
Atimene Nazim
Atimene Nazim

Reputation: 419

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

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.

Upvotes: 3

Views: 1586

Answers (2)

Renzo Calla
Renzo Calla

Reputation: 7686

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

Upvotes: 1

vitalym
vitalym

Reputation: 893

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
}

Upvotes: 4

Related Questions