设置丢失 上的插入符号位置按 T​​AB 键时的元素

Question

我的网页上有 pre 和 contentEditable="true"，当我按 时，我试图让它附加 "\t" >。我找到了一些其他插件，但它们仅适用于 </code>。

所以，问题是，当我通过 jQuery 将文本附加到

 时，它会丢失插入符号位置。我确信它正在失去焦点，但事实并非如此。所以 $("pre").focus() 不会执行任何操作。

我首先尝试对其进行模糊处理，但这并不实际，因为插入符号将根据浏览器返回到不同的位置。请提供一些帮助...：P，

我的代码在这里： http://jsfiddle.net/parisk/kPRpj/

Answer 1

尝试使用 document.execCommand 代替。 这是一个演示。简而言之：

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        document.execCommand('InsertHTML', false, '\t');
    }
});

Answer 2

首先尝试

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t");   
    }
});

插入一个选项卡。它会在你的光标后面插入一个制表符

chrome 中

var myselection = document.getSelection();
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

，然后在 IE8 的

var myselection = document.selection;
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

应该在最后得到插入符。

（一起）

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t"); 

        var myselection = null;
        if(document.getSelection)
        {
            myselection = document.getSelection();
        }
        else if (document.selection)
        {
            myselection = document.selection;
        }

        if(myselection != null)
        {
            myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
            myselection.collapseToEnd();
         }
    }
});

编辑
添加一个测试来查看 lastChild 是否为 null 等也会更安全。另外，在 keydown 函数中，如果您多次使用，则 jQuery("pre") 最好是 jQuery(this) 并放入变量中。 （这个例子就是但我太懒了）

Answer 3

仅针对您的问题，jquery caret 库非常擅长封装不同浏览器（即 IE）的怪癖： http://plugins.jquery.com/plugin-tags/caret

您始终可以使用它来获取所有选项卡位置的索引，然后稍后清理它们...

Answer 4

James Khoury 的答案总是将插入符号放在

 的末尾，当用户点击文本中间的 tab 时，这是不希望的。

这是修复此问题的修改版本：http://jsfiddle.net/kPRpj/12/。
让 tab 缩进该行而不是在插入符位置添加 tab 字符应该是相当简单的。为此，您可以替换

container.textContent = text.substring(0,start)+'\t'+text.substring(end);

为

var left = text.substring(0,start);
var lastLine = left.lastIndexOf("\n");
if (lastLine == -1) lastLine = 0;
container.textContent = left.substring(0,lastLine)+'\t'+text.substring(lastLine);

I've put a version 在 jsfiddle 上以这种方式运行。但是，您可能需要解决 '\n\r' 管理中的一些不一致问题。例如，我看到 chromium 将每一行视为一个单独的文本节点，这是相当意外的。我没有在其他浏览器中测试过。