j-Shortcuts

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Este componente pode ajudar com a criação de cortes de teclado. o componente is singleton.

Métodos:

component.register(shortcut, callback(e), [prevent], [preparation(e)]) - registros de um novo corte
component.exec('shortcut') - Avaliações curtas

cortes:

enter
esc
tab
cmd, meta, win
shift, capslock
ctrl
alt
space
backspace, del, delete
left, up, right, down
F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12
ou código-chave personalizado {Number} ou caracteres-chava {String(1)}
ins
remove significa backspace ou delete
save
selectall
clone
undo
redo
Suporte .shortcut, leia mais abaixo

Exemplo:

// SETTER(true, ...) --> works in jComponent +v9.0.0

SETTER(true, 'shortcuts/register', 'cmd + enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

SETTER(true, 'shortcuts/register', 'alt + p', function(e) {
    console.log('PRESSED: ALT + P');
});

SETTER(true, 'shortcuts/register', 'esc', function(e) {
    console.log('PRESSED: esc');
});

// +v3 supports multiple shortcuts at the one time:
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

// NEW: you can make preparation for the shortcut
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
}, function(e) {
	// You can enable/disable shortcut manually in the "preparation function"
	// but you need to "return {Boolean}", true will approve shortcut (it calls of the shortcut "callback")
	// otherwise "returning false" the shorcut will be skipped
	return e.target.tagName !== 'INPUT';
});

Declaração Inline:

<button class="exec shortcut" data-shortcut="F1" data-exec="METHO_TO_CALL">Help</button>

Classe .shortcut emitirá evento click
A propriedade e.shortcut contém a instância do Evento do evento keydown

Curtas de sessão:

// Open session for new shortcuts
// The methods disables all registered shortcuts while session is not end
SETTER('shortcuts/session', function(register) {
	register('esc', function() {

		// Cancels session
		SETTER('shortcuts/end');

	});
});

Use-o com <ui-component name="shortcuts">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

example.html

<ui-component name="shortcuts"></ui-component>

<div>PRESS ENTER or INSERT</div>

<script>
    var keyvalue = {};
    SETTER(true, 'shortcuts/register', 'ENTER', () => alert('ENTER'));
    SETTER(true, 'shortcuts/register', 'ins', () => alert('INSERT'));
</script>