7

我在我的网页上有prewith ，当我按下 时我contentEditable="true"试图让它附加。我为此找到了一些其他插件，但它们仅适用于."\t"<TAB><textarea>

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

我尝试先对其进行模糊处理，但这并不实际，因为插入符号会根据浏览器返回到不同的位置。请帮忙... :P,

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

4

4 回答 4

2

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

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        document.execCommand('InsertHTML', false, '\t');
    }
});
于 2011-07-11T22:16:09.053 回答
0

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);

我已经在 jsfiddle 上放置了一个以这种方式运行的版本。但是，您可能需要解决他们管理'\n\r'. 例如，我看到 chromium 将每一行视为一个单独的文本节点，这是相当出乎意料的。我没有在其他浏览器中测试过。

于 2011-05-09T14:57:00.577 回答
0

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

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

于 2011-05-05T19:35:16.587 回答
0

首先尝试

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

用于插入标签。它会在光标后插入一个标签

然后在铬

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 是否为空等也会更安全。如果您不止一次使用，那么在 keydown 函数中jQuery("pre")也可以更好地放入变量中。jQuery(this)（例子是，但我太懒了）

于 2011-04-14T06:13:14.603 回答