Keyboard events

Keyboard events are

input	triggered when the value of an <input> or <textarea> element is modified, or the content of a `contenteditable` element is modified
keydown	fired when any key on the keyboard is pressed down
keypress	a key is pressed down and that key normally produces a character value. For instance, when entering Ctrl+C, the event keypress is only fired when the key C is pressed down, whereas keydown is fired as soon as the Ctrl key is pressed
keyup	a key is released

`DOMEvent` object attributes

For keyboard events, the DOMEvent instance has the following attributes

altKey

True if the Alt (or Option, on Mac) key was active when the key event was generated

This attribute is not set for the input event

It is usually used with keypress, to be able to test if Alt+<key> was entered, or just <key>

Example

Enter text in the field below, with or without pressing the Alt key

Code

from browser import document

# the entry field has the id "altKey"
def keypress(ev):
    document["traceAltKey"].text = f"altKey: {ev.altKey}"

document["altKey"].bind("keypress", keypress)

charCode

The Unicode reference number of the key

This attribute is used only by the keypress event

It is set to a different value if the Shift key is pressed or not

Example

Enter text in the entry below. Note that the character can be read by ch(ev.charCode)

Code

from browser import document

def charCode(ev):
    trace = document["traceCharCode"]
    char = chr(ev.charCode)
    trace.text = f"charCode: {ev.charCode}, character: {char}"

document["charCode"].bind("keypress", charCode)

ctrlKey

True if the Control key was active when the key event was generated

This attribute is not set for the input event

It is usually used with keypress, to be able to test if Ctrl+<key> was entered, or just <key>

Example

Enter text in the field below, with or without pressing the Ctrl key

Code

from browser import document

def keypress(ev):
    trace = document["traceCtrlKey"]
    trace.text = f"ctrlKey : {ev.ctrlKey}"
    ev.preventDefault()

document["ctrlKey"].bind("keypress", keypress)

Note that ev.preventDefault() is used to avoid the default behaviour of some keyboard shortcuts using the Ctrl key.

keyCode

A system and implementation dependent numerical code identifying the unmodified value of the pressed key

The value doesn't change if the keys Alt, Ctrl or Shift are pressed

Note that the result is not the same depending on the handled events keydown, keyup or keypress

Example

Enter text in the entry fields below. Note that the character can be read by ch(ev.charCode) with the keypress event

with keydown

with keypress

with keyup

Code

from browser import document

def keyCode(ev):
    trace = document["traceKeyCode"]
    trace.text = f"event {ev.type}, keyCode : {ev.keyCode}"
    ev.stopPropagation()

document["keyCodeKeydown"].bind("keydown", keyCode)
document["keyCodeKeypress"].bind("keypress", keyCode)
document["keyCodeKeyup"].bind("keyup", keyCode)

shiftKey

True if the Shift key was active when the key event was generated

This attribute is not set for the input event

It is usually used with keypress, to be able to test if Shift+<key> was entered, or just <key>

Example

Enter text in the field below, with or without pressing the Shift key

Code

from browser import document

def keypress(ev):
    trace = document["traceShiftKey"]
    trace.text = f"shiftKey : {ev.shiftKey}"

document["shiftKey"].bind("keypress", keypress)

which

A system and implementation dependent numeric code identifying the unmodified value of the pressed key

Note that the result is not the same depending on the handled events keydown, keyup or keypress

Example

Enter text in the entry below. Note that the character can be read by chr(ev.which) for the keypress event

with keydown

with keypress

with keyup

Code

from browser import document

def which(ev):
    trace = document["traceWhich"]
    trace.html = f"event : {ev.type}<br>which: {ev.which}"
    if ev.type == "keypress":
        trace.html += f"<br>character : {chr(ev.which)}"

document["whichKeydown"].bind("keydown", which)
document["whichKeypress"].bind("keypress", which)
document["whichKeyup"].bind("keyup", which)

Introduction

Installation

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

`import` implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

Keyboard events

`DOMEvent` object attributes

Example

Code

Example

Code

Example

Code

Example

Code

Example

Code

Example

Code

Introduction

Installation

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Brython packages

Browser interface

Brython-specific built-in modules

Working with Brython

Cookbook

Keyboard events

DOMEvent object attributes

Example

Code

Example

Code

Example

Code

Example

Code

Example

Code

Example

Code

`import` implementation

`DOMEvent` object attributes