Introduction

Installation

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes and methods

Events
Mouse events
Keyboard events
Focus events
Drag events

Query string

Using Javascript objects and libraries

Brython-specific built-in modules

browser
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.websocket
browser.webworker

javascript
asyncio
asyncio.fs

Working with Brython

Options of function brython()
Testing and debugging
Deploying an application

Brython for Firefox OS

Introduction
WebApps : design
WebApps : application

Cookbook

Hello world !
Insert content in an element
HTML markup (bold,italic...)
HTML table
Bind and unbind events
Handle options in a SELECT
Drag and drop
Get the content of an element
Read the content of a file
Store objects locally
Example of onmouseover
 

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
keydownfired when any key on the keyboard is pressed down
keypressa 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
keyupa 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)