javascript event handling

Question

want to create a password field where I want to check for capsLock on/off on keystroke. Once a user enters a value in smallcase and try to another field want to validate the password value. Thus want to use onkeypress for every key pressed and then onblur at the end.

But the problem I am facing is every time onkeypress is checked onblur is also executed.

<input type="password" size=50  id='r5PswFld' name="name" value="" onkeypress="checkCapsLock(event)" onblur=chkPsw(this.id) >

can anyone help me how to attain this.

thanks in advance...

better if I am able to do this using only javascript/html/css I me no other technologies like jquery...

I hope this isn't your only validation checkpoint... validating only with Client-Side code is a recipe of disaster. — droplet
– droplet, Commented Jun 28, 2011 at 13:09
Good point. You're just asking for trouble if you don't perform server-side validation. — Neil
– Neil, Commented Jun 28, 2011 at 13:12

Mutation Person · Accepted Answer · 2011-06-28 13:26:12Z

1

This event is getting fired because you in checking the other checkbox input, you are blurring focus away from the current control.

Attach the onblur at the start your checkCapsLock(event) :

document.getElementById("r5PswFld").onblur = function(chkPsw(this.id)'){};

If you find yourself having to perform an action that will focus away, detach it:

document.getElementById("r5PswFld").onblur = function(){};

Next time you fire checkCapsLock it will reacttach if you need to. You could then also remove the onblue attribute completely from your code.

That said, be careful of any onblur validation. If is obtrusive (like an alert) then it could quickly get very frustrating for the user.

EDIT

In repose to the comment below, I thought I'd correct for the problem of other blur bindings. I'll use jQuery for preference.

The correct solution would look something like:

function MyBlurFunc(){
    chkPsw(this.id);
}

To bind:

$("#r5PswFld").blur(MyBlurFunc);

To unbind

$("#r5PswFld").unbind('blur', MyBlurFunc);

edited Jun 28, 2011 at 13:26

answered Jun 28, 2011 at 13:09

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Neil Over a year ago

I won't vote it down because in 99% of the cases it'd work, but consider the 1% in which some javascript library overrides your blur method and then calls it. You're undermining all methods using blur event, not just yours.

Mutation Person Over a year ago

@Neil: Very generous of you, neil. You are, of course correct. I'll edit my answer to correct for this.

Mutation Person Over a year ago

@Neil: There you go. Hope this meets your approval ;-)

Neil · Accepted Answer · 2011-06-28 13:09:19Z

1

Unfortunately, onblur will get called whenever focus is left from the field, meaning if you open some sort of message box informing the user of having capslock on, you're removing focus and thus trigger the onblur event.

An alternative might be to activate a flag which you assign to be true prior to opening a message box so that in the case in which you enter chkPsw, you can ignore it.

In other words:

var flgEventsOff = false;
function checkCapsLock(event) {
    if (fieldValueIsUpper) {
        flgEventsOff = true;
        alert('Please turn off capslock!');
        flgEventsOff = false;
    }
}

function chkPsw(id) {
    if(!flgEventsOff) {
        // Validate password
    }
}

answered Jun 28, 2011 at 13:09

Neil

5,79727 silver badges37 bronze badges

Comments

DanielB · Accepted Answer · 2011-06-28 13:09:33Z

0

No, the blur event won't be executed the same time a keyPress event is fired. I assume you have an alert() statement within your checkCapsLock() event handler, which causes the loss of focus.

answered Jun 28, 2011 at 13:09

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Comments

Tom Squires · Accepted Answer · 2011-06-28 13:05:28Z

-1

Why would you not just change it to lowecase on the onblur event before it validates?

answered Jun 28, 2011 at 13:05

Tom Squires

9,31612 gold badges51 silver badges76 bronze badges

1 Comment

Ash Burlaczenko Over a year ago

Do you have an answer or just a question?

Collectives™ on Stack Overflow

javascript event handling

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related