7

私は自分のウェブページに を持っpreていて、を押したときに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

あなたの質問だけに、jqueryのcaretライブラリはさまざまなブラウザ（つまりIE）の周りの癖をカプセル化するのにかなり優れています：http：//plugins.jquery.com/plugin-tags/caret

いつでもこれを使用して、すべてのタブ位置のインデックスを取得し、後でそれらをクリーンアップすることができます...

于 2011-05-05T19:35:16.587 に答える
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'。たとえば、クロムは各行を個別のテキスト ノードとして認識しますが、これは予想外のことです。他のブラウザではテストしていません。

于 2011-05-09T14:57:00.577 に答える
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 が null であるかどうかなどを確認するテストを追加する方が安全です。また、keydown関数でjQuery("pre")はjQuery(this)、複数回使用している場合は変数に入れてください。（これは例ですが、私は怠け者です）

于 2011-04-14T06:13:14.603 に答える