Question

Programming Question First (from w3 schools)

The programming example way below (from W3 schools) is nice and easy, it works on their website but I’m really confused on something.

onkeypress="return noNumbers(event)"

why is there a return before the function? What does it do? If you know the answer to that – how did you find out that information? My guess would be, that it allows the keypressed function to continue processing the keystroke since my event “interupted” it?

also – I have been trying to see what ‘event’ is. It doesnt seem to be a keyword. I spent > hour trying to find what it is. It doesnt seem to be assigned anywhere in their code example. Normally in that spot you would see ‘this’. If it’s a not assigned variable will it always pass the event handler? Confused…

What I want to do with their function

I want to make a password strength checker AS you type. I was looking at their example so I could figure out how to capture keys (cross browser and minimal IE7). My idea was…

<input type="password" name="pword" maxlength="50" size="50" id="field_pword" onkeyup="PasswordStrength(name, 8, 'relaxed')" onblur="CheckField(name, 8, 1)">

note: Yes, I know it’s better to assign event handlers outside of the html but I couldn’t see a way to pass variables to it unless it was inline. I’m a novice so I may have overlooked something but… thats why I do it IN the HTML.

also, IS IT BAD how I am passing name? it does send pword to the function but am I doing something wrong there? Should I just make it a constant string? It works as is, but sometimes just because something works… doesn’t mean it’s correct. 🙂

onkeyup="PasswordStrength('pword', 8, 'relaxed')" onblur="CheckField('pword', 8, 1)">

My checkfield function works (I use it after every field) I recently added in PasswordStrength. My question is… my new function isn’t passing the event hander so how can I check what key is pressed? Can I do this?

onkeyup="PasswordStrength(name, 8, 'relaxed', event)"

or should it read…

onkeyup="return PasswordStrength(name, 8, 'relaxed', event)"

If I can’t pass whatever ‘event’ is that way, inside my function can I accurately get what the key pressed was without a big mess of code? Since I’m learning I need examples to be as simple as possible (please).

Using my function I was going to do it this way but I still don’t know how to get what key was pressed…

function PasswordStrength(sField, iMinLength, sStrength, e?)
{
var form = document.forms[0];
var gc = form[sField].value;
    // once I have the value I can do checking but it would be nice to have WHAT key
    // was pressed
    // the e? above is where I was thinking of passing the event

W3 example I was pulling some knowledge from…

function noNumbers(e)
{
var keynum;
var keychar;
var numcheck;

if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
numcheck = /\d/;
return !numcheck.test(keychar);
}
</script>

<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>

</body>
</html>

As someone is typing I was going to change the text using innerHTML beside the password field to say, “Weak”, “Ok”, “Good”, “Perfect” or something along those lines for the password status. I’d love to do it how google does it with a graphic to the left of the field but I don’t know how to do that simply. lol.

Is my way fixable? Do you have a better way to do this that I don’t know about? Much appreciated. Awaiting an infusion of wisdom…

Answer 1

1) The “return” word makes it so that if the function returns false, that gets passed back to the event and stops the keystroke from being processed by the browser (and appearing in the input field if that’s what the event is on).

2) event is the Event object, which contains information on the event such as what key wa pressed, where the event was fired, etc.

3) Yes, it is bad how you are passing name, because you aren’t passing it. Use this.name instead.

4) In this case, you don’t need return because you aren’t trying to stop a keystroke from being added to the textbox. Similarly, you don’t need to pass event because you can pass this.value to get the contents of the textbox.

5) You can just pass this instead of this.name, this.value or whatever other values.Then, in the function, get the properties from the single argument.

6) Once you pass the entire value with this.value, you can run your tests on that. There is absolutely no need to know what key was pressed, especially as things like Ctrl+V would completely screw you over.

7) You can have a <div> and change its width and/or background colour to make a sort of strength bar indicator.