Question

我的网页上有pre contentEditable="true"，我在按"\t"时尝试追加<TAB>。我找到了其他一些插件，但它们只在<textarea>上工作。

所以，问题是当我通过jQuery将文本追加到<pre>时，它会丢失插入位置。我确信它正在失去焦点，但事实并非如此。所以$("pre").focus()，什么都不做。

我试图先将它弄糊涂，但这是不实际的，因为根据浏览器，插入符将返回不同的位置。请帮助......：P，

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

Answer 1

请尝试使用document.execCommand。 Here’s a demo。简而言之：

$("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插入库非常擅长封装不同浏览器（即IE）周围的怪癖：http://plugins.jquery.com/plugin-tags/caret

您可以随时使用它来获取所有标签位置的索引，然后稍后将其清除......

Answer 4

James Khoury的回答总是将插入符号放在<pre>的末尾，当用户在文本中间点击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);

我把a version放在jsfiddle上。但是，您可能需要解决'\n\r'管理中的一些不一致问题。例如，我看到铬将每一行看作一个单独的文本节点，这是相当意外的。我没有在其他浏览器中测试它。

设置在<pre> element on pressing TAB key</pre>上失去了插入位置

4 个答案: