Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `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

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Eventos de teclado

Los eventos del teclado son

input se desencadena cuando el valor de un elemento <input> o una <textarea> se modifica, o cuando el contenido de un elemento contenteditable se modifica
keydowncuando se pulsa una tecla del teclado
keypresscuando se pulsa una tecla del teclado y esa tecla produce un 'caracter'. Por ejemplo, cuando pulsamos Ctrl+C, el evento keypress solo se dispara cuando la tecla C se pulsa, mientras que keydown se dispara inmediatamente al pulsar la tecla Ctrl
keyupla tecla se deja de pulsar

Atributos del objeto DOMEvent

Para los eventos del teclado, la instancia DOMEvent posee los siguientes atributos

altKey
True si la tecla Alt (o Option, en Mac) cuando el evento del teclado es generado

Este atributo no aplica para el evento input

Normalmente se usa con keypress, para poder comprobar si Alt+<key> fue introducido o solo <key>

Ejemplo

Introduce texto en el campo de más abajo pulsando y sin pulsar la tecla Alt

  

Código

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
El número de referencia Unicode de la tecla

Este atributo solo se usa en el evento keypress

El valor será diferente si la tecla Shift está pulsada o no

Ejemplo

Introduce texto en el campo de más abajo. Date cuenta que el carácter se puede leer mediante chr(ev.charCode)

   

Código

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 si la tecla Control está activa cuando se produce el evento del teclado

Este atributo no aplica para el evento input

Normalmente se usa con el evento keypress, para ser capaz de comprobar si
Ctrl+<key> fue pulsado o solo <key>

Ejemplo

Introduce texto en el campo de más abajo, presionando y sin presionar la tecla Ctrl

  

Código

from browser import document

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

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

Fíjate que ev.preventDefault() para evitar el comportamiento por defecto de algunos atajos de teclado que usan la tecla Ctrl

keyCode
Un código numérico dependiente del sistema y de la implementación identificando el valor sin modificar de la tecla pulsada

El valor no cambia si se pulsan las teclas Alt, Ctrl o Shift

Fíjate que el resultado no será el mismo dependiendo del evento a manejar,
keydown, keyup o keypress

Ejemplo

Introduce texto en el campo de más abajo. Date cuenta que el carácter se puede leer mediante chr(ev.charCode) con el evento keypress

con keydown

con keypress   

con keyup

Código

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 si la tecla Shift está activa en el momento de generar el evento

Este atributo no aplica para el evento input

Normalmente se usa con keypress, para ser capaz de comprobar si
Shift+<key> fue pulsado o solo <key>

Ejemplo

Introduce texto en el campo de más abajo, pulsando y sin pulsar la tecla Shift

  

Code

from browser import document

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

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

which
Un código numérico dependiente del sistema y de la implementación identificando el valor sin modificar de la tecla pulsada

Fíjate que el resultado no será el mismo dependiendo del evento a manejar, keydown, keyup o keypress

Ejemplo

Introduce texto en el campo de más abajo. Date cuenta que el carácter se puede leer mediante chr(ev.which) del evento keypress

con keydown

con keypress

con keyup

 

Código

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)