Introduction

Installation

Limitations of the "file" protocol

Frequently asked questions

Syntax, keywords and built-in functions

Standard distribution

import implementation

Brython packages

Browser interface

Introduction - DOM API
Creating a document
Accessing elements
Attributes, properties 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.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

Widgets
browser.widgets.dialog
browser.widgets.menu

interpreter
javascript

Working with Brython

Options of function brython()
Testing and debugging
Deploying an 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)

key
A string for the key pressed:

- the character if the key produces a character

- a string that describes the key for special keys (eg "Control" for the Ctrl key)

Example

Put the cursor in the input boxes below and hit keys on the keyboard

keydown
keypress   
keyup

Code

from browser import bind, document

def keyevent(ev):
    trace = document["traceKey"]
    trace.text = f"type: {ev.type}, key: {ev.key}"
    ev.stopPropagation()

document["key_keydown"].bind("keydown", keyevent)
document["key_keypress"].bind("keypress", keyevent)
document["key_keyup"].bind("keyup", keyevent)

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.

code
a string that describes the physical keyboard touch that is hit

this value is the same regardless of the character produced when hitting the key: for instance on an AZERTY keyboard, hitting key A will produce the code "KeyQ"

Example

Put the cursor in the entry fields below and hit random keys.

with keydown

with keypress   

with keyup

Code

from browser import document

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

document["codeKeydown"].bind("keydown", keyCode)
document["codeKeypress"].bind("keypress", keyCode)
document["codeKeyup"].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)