CODEWITHSUNDEEP
javascriptdom-eventsalertkeypress
zfm
zfm

Reputation: 2006

Ignore keypress when alert shown on Javascript

I have a function X doing something when the cursor is focused in a textbox and I press an enter, however there is a possibility (with other JS function) that, if I focus on this textbox, I got an alert.

The problem happens here, sometimes I "ignore" the error by pressing the enter, how not to call this function X when the alert's there, but I want it to work again when the alert is closed again.

On HTML page:

<input type='text' name='col0' id='col0' onkeyup='arrowHandler(0);'
onblur='count(0)' />
<input type='text' name='col1' id='col1' onkeyup='arrowHandler(1);' 
onblur='count(1)' />
<input type='text' name='col2' id='col2' onkeyup='arrowHandler(2);' 
onblur='count(2)' />
<input type='text' name='col3' id='col3' onkeyup='arrowHandler(3);' 
onblur='count(3)' />

On JS page:

function arrowHandler(i){
  var key = window.event.keyCode;
  if(key == 13){
    // moving to the next (or first, if last) text field
    var newcol = parseInt(i) + 1;
    if(newcol == col) newcol = 0;
    elmt = document.getElementById("col" + newcol);
    elmt.focus();
  }
}

function count(i){
  if(parseInt(document.getElementById("col" + i).value) > 20){
    alert("error!");
  }
}

Here, when the focus is in col0, I write 25, then the focus moves to col1, I got an alert, then I press enter, and as the result, the focus moves to col2 (I don't want the last movement because of pressing enter when alert shown).

Upvotes: 1

Views: 792

Answers (5)

khaled_webdev
khaled_webdev

Reputation: 1430

u can use count function inside arrowHandler inside if(key == 13) condition and adding return false in count function

(i will ameliorate my answer when i had time)

Upvotes: 0

Adam Heath
Adam Heath

Reputation: 4753

You could try something like:

var block = false;

function arrowHandler(evt, i){
  var key = window.event.keyCode;
  if(!block && key == 13){
    // moving to the next (or first, if last) text field
    var newcol = parseInt(i) + 1;
    if(newcol == col) newcol = 0;
    elmt = document.getElementById("col" + newcol);
    elmt.focus();
  }
}

function count(i){
  if(parseInt(document.getElementById("col" + i)).value > 20){
    block = true;
    alert("error!");
    setTimeout(function(){block=false;},100);
  }
}

Which, as alert stops JS execution, ignore any key presses immediately after the alert.

Although, you probably should reconsider using the alert, there are much better ways to do validation.

Upvotes: 1

Parth Thakkar
Parth Thakkar

Reputation: 5475

Here's a simpler version. Handling focus is done in a separate function. No need for timers and all. Hope this helps.

And as others have said, please avoid using alert, please - it's really irritating if you find such a thing, isn't it? Think over it.

var handleFocus = function (i, error) {
    var id = "col" + (error ? i : ++i);
    if (id === 'col' + col) id = 'col0';
    alert(id + "  " + i + "  " + error)
    document.getElementById(id).focus();
};

var arrowHandler = function (evt, i) {
    var key = window.event.keyCode;
    if (key == 13) {
        handleFocus(i, false);
    }
};

var count = function (i) {
    if (parseInt(document.getElementById("col" + i).value) > 20) {
        alert("error!");
        handleFocus(i, true);
    }
};

Upvotes: 0

robrich
robrich

Reputation: 13205

Ideally you'd not use alert() but rather pop up a <div> styled nicely that would gain focus, or show a <span> that indicates the failure message without forcing the user to acknowledge it.

If you choose to stick with the alert() solution, @gopi1410 is correct: set a var before and clear it after that means "don't filter keystrokes".

Upvotes: 0

gopi1410
gopi1410

Reputation: 6625

Try this, I guess it should work:

You could use a global temp variable say t & set it to 1 when you alert "error!". Then in your arrowHandler function change the if condition to if(key==13 && t==0) followed by your code & add an else part to it where you change t=0.

Also, I guess your parseInt(document.getElementById("col" + i))>20 statement should be replaced by parseInt(document.getElementById("col" + i).value)>20.

Upvotes: 0

Related Questions