Polimero - Chiavi in ferro A11y
Il <iron-a11y-keys> elemento viene utilizzato per elaborare i comandi della tastiera utilizzando l'interfaccia crossbrowser.
Il keysattributo indica con quale combinazione di tasti verrà attivato l'evento. Accetta tasti di modifica come Maiusc, Control, Alt, Meta e alcuni tasti comuni della tastiera come az, 0-9, F1-F12, Pagina su, Pagina giù, Freccia sinistra, Freccia destra, Home, Fine, Esc, Spazio, Tab e Invio.
Tutti i tasti dovrebbero essere accorciati e dovrebbero essere in minuscolo. Ad esempio, la freccia destra è per destra, Pagina su è per pageup, Control è per ctrl, Esc è per esc, F5 è per f5, ecc
Esempio
Per utilizzare l'elemento iron-a11y-keys, vai alla cartella del tuo progetto nel prompt dei comandi e usa il comando seguente.
bower install PolymerElements/iron-a11y-keys --save
Il comando precedente installa l'elemento iron-a11y-keys in bower_componentscartella. Successivamente, importa il file iron-a11y-keys nel tuo index.html utilizzando il seguente comando.
<link rel = "import" href = "/bower_components/iron-a11y-keys/iron-a11y-keys.html">
L'esempio seguente mostra l'uso dell'elemento iron-a11y-keys.
<!DOCTYPE html>
<html>
<head>
<base href = "http://polygit.org/components/">
<meta name = "viewport" content = "width = device-width">
<title>iron-a11y-keys</title>
<link rel = "import" href = "polymer/polymer.html">
<link rel = "import" href = "iron-a11y-keys/iron-a11y-keys.html">
<link rel = "import" href = "paper-input/paper-input.html">
</head>
<body>
<demo-keys></demo-keys>
<dom-module id = "demo-keys">
<template>
<iron-a11y-keys target = "[[_target]]"
keys = "shift+enter enter esc pageup pagedown up down left right space"
on-keys-pressed = "_onKeyPress"></iron-a11y-keys>
<h4>Press any of the below keys and check console.</h4>
<p>shift + enter, enter, esc, pageup, pagedown, up, down, left, right,
space.</p>
<paper-input type = "text" value = "{{_value::input}}" id = "input" />
</template>
<script>
Polymer ({
is: 'demo-keys', properties: {
_value: {
type: String
},
_target: {
value: function() {
return this.$.input;
}
}
},
_onKeyPress: function(e) {
e.detail.keyboardEvent.preventDefault();
console.log(e.detail.combo);
}
});
</script>
</dom-module>
</body>
</html>
Produzione
Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.
polymer serve
Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.