WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (2/8). | WebReference

WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (2/8).

To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

Dynamic HTML: The Definitive Reference, 2E. Chapter 6: Scripting Events

The event.returnValue Property (IE 5 and Later)

Starting with Version 5 (Windows and Mac), IE's event object has a Boolean property, returnValue, that controls whether the element's default action occurs. The default value of the property is true. But to prevent the default action, your function script sets its value to false. The following IE-only function could be invoked from the onkeypress event handler of a text box (onkeypress="numberPlease();" or txtBoxRef.onkeypress=numberPlease;). Its job is to let only numbers appear in the field by preventing the onkeypress event from performing its default action for other characters:

function numberPlease() {
    var charCode = event.keyCode;
    if (charCode < 48 || charCode > 57) {
        alert("Only whole numbers are allowed.");
        event.returnValue = false;
    }
}

Be careful not to confuse the event.returnValue property with the purpose of the JavaScript return statement. Use the former to control an event target's default behavior; use the latter when a function must return a value to a calling statement.

W3C preventDefault() Method (Netscape 6 and Later)

Instead of using a property of its event object for this purpose, the W3C event model gives the event object the preventDefault() method. You can invoke this method in an event listener function to stand in the way of the event continuing to the element. The syntax for its use is not far different from the IE returnValue property. The following function is a W3C version of the numbers-only real-time input checker. Due to an egregious bug in early versions of Netscape 6, however, the preventDefault() method works reliably only on event listeners that are added by way of tag attributes. Therefore, for the following function to do its job effectively, it should be invoked from an input element tag's attribute (onkeypress="numberPlease(event);"):

function numberPlease(evt) {
    var charCode = evt.charCode;
    if (charCode < 48 || charCode > 57) {
        alert("Only whole numbers are allowed.");
        evt.preventDefault();
    }
}

Cross-Browser Techniques

With the preventDefault() bug persisting through so many Netscape 6 editions, it is safest to stick with element tag attribute binding for preventing default actions. This means that the return statement becomes part of the value assigned to the attribute (e.g., onkeypress="return numberPlease(event)"). For good measure, the following function demonstrates branching techniques that can be used in the future for both tag attribute and object property event bindings. A little bit of additional event key code detection allows helpful noncharacter keys (arrows, Tab, and Backspace, for example) to perform their normal jobs (in Netscape 6 and later, the charCode property for noncharacter keys is 0). The function is a cross-browser, backward-compatible version of the text box filter function shown earlier. This version works even with Navigator 4:

function numberPlease(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var charCode = (evt.charCode || evt.charCode == 0) ? evt.charCode : 
                       ((evt.keyCode) ? evt.keyCode : evt.which);
        if (charCode > 13 && (charCode < 48 || charCode > 57)) {
            alert("Only whole numbers are allowed.");
            if (evt.returnValue) {
                evt.returnValue = false;
            } else if (evt.preventDefault) {
                evt.preventDefault();
            } else {
                return false;
            }
        }
    }
}

Of course, for use with tag attribute binding, the innermost segment could be compressed to a single return false statement after the alert.


To page 1current pageTo page 3To page 4To page 5To page 6To page 7To page 8
[previous] [next]

Created: September 9, 2002
Revised: September 9, 2002

URL: http://webreference.com/programming/javascript/dhtmlref/chap6/2/2.html