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

Broad Network

Related Articles

Basics of Keyboard Event Types

DOM Event Basics for HTML – Part 4

DOM for HTML

Introduction

Related Links

Comments