尝试一下
监听按键
import { keyboard } from "abm-ui";
import { $, $new } from "abm-utils";
const container = $('#main')!;
keyboard.on('down', (event)=>{
container.append($new('w-hint-key', { prop: { key: event.key }, id: event.key }));
console.log(event);
});
keyboard.on('up', (event)=>{
console.log(event);
$(`#${event.key}`, container)?.remove();
});
快捷键
#main
flex-direction column
flex-wrap nowrap
justify-content flex-start
align-items flex-start
padding 12px
gap 8px
import { keyboard } from "abm-ui";
import { $, $apply, $div, $new } from "abm-utils";
function normalize(input: string): string {
return input.replaceAll('.', '-');
}
const container = $('#main')!;
container.append(
...Object.entries(keyboard.bindMap).map(([id, group])=>$div(
{ attr: { 'ui-layout': 'flow' }, style: { alignItems: 'center' } },
$div({ id: normalize(id) }, id),
...group.map((keys)=>$div(
{ attr: { 'ui-layout': 'flow', 'ui-panel': 'middle' } },
...[...keys].map((key) => $new('w-hint-key', { prop: { key } })),
)),
)),
);
keyboard.on('shortcutTrigger', (event)=>{
console.log(event);
const item = $(`#${normalize(event.key)}`, container);
if (!item) return;
$apply(item, {
style: {
color: '$themeText',
background: '$theme',
},
});
setTimeout(() => {
$apply(item, {
style: {
color: '',
background: '',
},
});
}, 100);
});
别名
#main
flex-direction column
flex-wrap nowrap
justify-content flex-start
align-items flex-start
padding 12px
gap 8px
import { keyboard } from "abm-ui";
import { $, $apply, $div, $new } from "abm-utils";
function normalize(input: string): string {
return input.replaceAll('.', '-');
}
const container = $('#main')!;
container.append(
...Object.entries(keyboard.aliasMap).map(([id, keys])=>$div(
{ attr: { 'ui-layout': 'flow' }, style: { alignItems: 'center' } },
$div({ id: normalize(id) }, id),
...[...keys].map((key) => $new('w-hint-key', { prop: { key } })),
)),
);
keyboard.on('aliasTrigger', (event)=>{
console.log(event);
const item = $(`#${normalize(event.key)}`, container);
if (!item) return;
$apply(item, {
style: {
color: '$themeText',
background: '$theme',
},
});
setTimeout(() => {
$apply(item, {
style: {
color: '',
background: '',
},
});
}, 100);
});
接口
类型 KeysAllow
允许使用的按键，能够处理的按键。
KEYS_ALLOW
允许使用的按键列表，只读。
类型 KeyBindItem
Set<KeysAllow> 类型，按键绑定项。
类型 KeyBindGroup
KeyBindItem[] 类型，按键绑定组。
类型 KeyBindMap
按键绑定图。
类型 AliasItem
按键别名项。
类型 AliasMap
按键别名图。
类型 KeyBinderEvents
按键绑定事件列表。
update：按键更新done：绑定结束
类 KeyBinder
按键绑定类，该类实现了 IEventSource 接口。
binding
是否正在绑定，只读。
keys
获取当前按下的按键，只读。
cancel()
结束按键绑定。
类型 KeyboardEvents
键盘事件列表。
down：按键按下up：按键松开press：完整按键按下松开trigger：按键触发（长按按键时将反复触发）shortcut：快捷键被按下shortcutTrigger：快捷键触发（长按快捷键将反复触发）aliasDown：别名按键按下aliasUp：别名按键松开aliasPress：完整别名按键按下松开aliasTrigger：别名按键触发（长按按键时将反复触发）
keyboard
该类实现了 IEventSource 接口。
pressing
获取当前按下的按键，只读。
bindMap
获取或修改按键绑定图。
set()
为特定 ID 设定一组快捷键，将覆盖还 ID 原有快捷键。
参数：
id：string类型，快捷键 IDgroup：KeyBindGroup类型
add()
为特定 ID 添加一项快捷键。
参数：
id：string类型，快捷键 IDgroup：KeyBindItem类型
rm()
为特定 ID 移除一项快捷键。
参数：
id：string类型，快捷键 IDgroup：KeyBindItem类型
delete()
删除特定 ID 的所有快捷键。
参数：
id：string类型，快捷键 ID
aliasMap
读取或修改按键别名图。
setAlias()
为特定别名设置一组按键，将覆盖别名原有按键。
参数：
id：string类型，别名 IDitem：AliasItem类型
addAlias()
为特定别名添加按键。
参数：
id：string类型，别名 IDkey：KeysAllow类型
rmAlias()
为特定别名输出按键。
参数：
id：string类型，别名 IDkey：KeysAllow类型
deleteAlias()
删除特定别名。
参数：
id：string类型，别名 ID
isAliasActivated()
检查别名对应按键是否激活。
参数：
id：string类型，别名 ID
bind()
开始绑定按键，键盘事件将被屏蔽直到按键绑定结束或被取消，返回 KeyBinder 或 null。
若返回 null，代表当前正在绑定按键。
preventDefaultWebBehavior
读取或修改阻止浏览器默认按键行为。