使用 mootools 映射键盘键答案

【问题标题】：map keyboard keys with mootools使用 mootools 映射键盘键
【发布时间】：2013-07-09 01:14:36
【问题描述】：

我希望让 enter 键的行为与表单上的 tab 键完全一样。

我被卡在了 fireEvent 部分。

var inputs = $$('input, textarea');
    $each(inputs,function(el,i) {
    el.addEvent('keypress',function(e) {
    if(e.key == 'enter') {
        e.stop();
        el.fireEvent('keypress','tab');
    }
    });
});

如何使用指定的键触发按键事件？任何帮助将不胜感激。

【问题讨论】：

到目前为止，这似乎是不可能的......我很想被证明是错误的 :)

标签： events keyboard mootools

【解决方案1】：

这会起作用，但它依赖于 dom 顺序而不是 tabindex

var inputs = $$('input,textarea');

inputs.each(function(el,i){
    el.addEvent('keypress',function(e) {
        if(e.key == 'enter'){
            e.stop();
            var next = inputs[i+1];
            if (next){ 
                next.focus();
            }
            else {
                // inputs[0].focus(); or form.submit() etc.
            }
        }
    });
});

另外，textarea 输入捕获？为什么，它是多行的...无论如何，要在键盘级别执行此操作，请查看 Syn。 https://github.com/bitovi/syn

上面的内容会因隐藏元素（您可以过滤）和禁用元素等而失败。不过，您明白了 - focus()。不确定它会在input[type=radio|checkbox|range] 等上做什么。

附言您的代码将不起作用，因为.fireEvent() 只会调用绑定的事件处理程序，而不是实际为您创建事件。

【讨论】：

谢谢，我试过这段代码，但这里的问题是 $$() 数组不一定按顺序返回元素，因为 textareas 会在输入之后跟随。此外，如果动态添加新项目，则需要刷新数组。
那么你需要考虑正确保持tabindexes和this.getNext('input[tabindex=' + this.get('tabindex')) - 或者手动触发关键事件跨浏览器 - 这不是一项小任务。
我决定为特定的输入和文本区域添加一个特定的类，从而使它们以正确的顺序返回。

【解决方案2】：

看看class keyboard (MooTools More)。

它可以为键触发单个事件，并提供禁用和启用分配给键盘实例的侦听器的方法。

manual has some examples how to work with this class，这里只是一个简单的例子，我是如何在类似情况下实现它的：

var myKeyEv1 = new Keyboard({
    defaultEventType: 'keydown'
});

myKeyEv1.addEvents({
    'shift+h': myApp.help()   // <- calls a function opening a help screen
});

关于您示例中的enter 键，您必须在某处return false 以防止触发输入事件。查看this SO post了解更多详情。

【讨论】：