srcmini<iron-a11y-keys>元素用于使用跨浏览器界面处理键盘命令。
keys属性指示事件将以哪种键组合触发。它接受修饰键, 例如Shift, Control, Alt, Meta和一些常见的键盘键, 例如az, 0-9, F1-F12, Page Up, Page Down, 左箭头, 右箭头, Home, End, Escape, Space, Tab, 然后按Enter。
所有键都应缩短并且应小写。例如, 向右箭头表示向右, ” Page Up”用于向上翻页, ” Control”用于Ctrl, Escape表示esc, F5表示f5, 依此类推。
让我们以一个示例来演示Iron A11y Keys的用法：
打开命令提示符, 然后使用以下代码导航到项目文件夹以使用iron-a11y-keys元素。
bower install PolymerElements/iron-a11y-keys --save这会将iron-a11y-keys元素安装在bower_components文件夹中。接下来, 使用以下命令将iron-a11y-keys文件导入index.html中。
<link rel = "import" href = "/bower_components/iron-a11y-keys/iron-a11y-keys.html">例：
<!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>
评论前必须登录！
注册