javascript - 关注原型(prototype) Javascript 库中选项卡后的文本区域

Question

我正在尝试使文本区域具有选项卡感知功能，作为其中的一部分，我编写了以下 Javascript。我正在使用原型(prototype) js 库，

document.observe("dom:loaded", function (){
    $('tabawaretextarea').observe('keydown',function(e) {
            if(e.keyCode === 9) { // tab was pressed
            $('tabawaretextarea').value = $F('tabawaretextarea')+"\t";
                            $('tabawaretextarea').focus();
            return false;
        }
    })
});

正如预期的那样，选项卡被附加在末尾。但是，我的文本区域失去了焦点，文本区域旁边的 HTML 元素获得了焦点。我相信 return false 应该会产生魔力，但事实并非如此。

除此之外，我还尝试将所有元素的 tabindex 设置为 -1，一些文章说我必须使用“autoTab”类并设置 tab 的最大长度才能工作 - 我尝试这样做，因为我使用的是基于 spring 的 <form:textarea/>属性 maxlength 是不允许的(即使在文本区域中也不允许 maxlength)。

有什么建议吗？

Answer 1

return false; 在原型(prototype)事件处理程序中不执行任何操作。要取消默认操作，请使用 Event.stop()。此外，您需要在按键而不是按键时执行此操作:

document.observe("dom:loaded", function (){
    $('tabawaretextarea').observe('keypress',function(e) {
        if(e.keyCode === 9) { // tab was pressed
            $('tabawaretextarea').value += "\t";
            e.stop();
        }
    });
});

注意:这在 FF 中有效，但在 Chrome 和 AFAIK 中无效，没有解决方法。我没有测试过 IE、Opera 或 Safari。

编辑:“keydown”确实有效，并且在 Chrome 和 FF 中有效。同样，其他浏览器未测试，但这里是解决方案:

document.observe("dom:loaded", function (){
    $('tabawaretextarea').observe('keydown',function(e) {
        if(e.keyCode === 9) { // tab was pressed
            $('tabawaretextarea').value += "\t";
            e.stop();
            // note that we don't need to focus() the element as it hasn't lost focus
        }
    });
});

See it on jsFiddle