Question

我正在尝试使用文本区域选项卡识别，并且作为其中的一部分，我编写了以下javascript。我正在使用原型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元素正在聚焦。我相信返回虚假应该做魔术，但事实并非如此。

除此之外，我还尝试将所有元素tabindex设置为-1，有些文章说我必须使用“autoTab”类并设置tab的maxlength才能工作 - 我尝试这样做，因为我使用的是基于弹簧{ {1}}不允许使用属性maxlength（即使文本区域中不允许使用maxlength）。

有什么建议吗？

Answer 1

return false;在原型事件处理程序中不执行任何操作。要取消默认操作，请使用Event.stop()。此外，你需要在keypress上执行此操作，而不是keydown：

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

在原型javascript库中的选项卡之后关注文本区域

1 个答案: