Broad Network


Basics of Keyboard Event Types

DOM Event Basics for HTML Part 4

DOM for HTML

Foreword: In this part of the series, I talk about the basics of keyboard event types.

By: Chrysanthus Date Published: 7 Jun 2015

Introduction

This is part 4 of my series, DOM Event Basics for HTML. In this part of the series, I talk about the basics of keyboard event types. You should have read the previous parts of the series before reaching here, as this is a continuation. Keyboard events are commonly directed at the element that has focus. For the web page you will be concerned with keyboard events when the Form input or textarea element has focus.

When you press a key on the keyboard, there is a keydown event and a keyup event.

onkeydown
A browser MUST dispatch this event when a key is pressed down. This event type MUST be dispatched before the keypress, input, and keyup events associated with the same key (see later). The following code has a response for this event. You will have to type a key into the textarea element to see the effect. To try the code, type it in the body element of an HTML document; load the page, click the textarea element to give it focus, and then type any key on the keyboard.

    <form>
        <textarea cols=30 rows=3 onkeydown=evFn()></textarea>
    </form>

    <script type="text/ecmascript">

        function evFn()
            {
                alert("a key has been pressed");

            }

    </script>

onkeyup
A browser MUST dispatch this event when a key is released. This event type MUST be dispatched after the keydown, keypress, and input events associated with the same key (see later). The following code has a response for this event. You will have to type a key into the textarea element to see the effect. To try the code, type it in the body element of an HTML document; load the page, click the textarea element to give it focus, and then type any key on the keyboard.

    <form>
        <textarea cols=30 rows=3 onkeyup=evFn()></textarea>
    </form>

    <script type="text/ecmascript">

        function evFn()
            {
                alert("a key has been released");

            }

    </script>

That is it for this part of the series.

Chrys

Related Links

DOM Basics for HTML
DOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library

BACK

Comments

Become the Writer's Fan
Send the Writer a Message