2

私のプロジェクトでは、キャレットが contenteditable div にある場所にスパンを追加しようとしています。このスパン要素は、キャレットのオフセット位置を間接的に取得するために使用されます。

var _spanElem = "<span class='spanPos'></span>";

これで、contenteditable div のケア位置を取得できます。また、キャレット位置でスパン要素を削除および追加する方法もわかりました。

しかし、問題は、この操作を行っている間、左ボタンと右ボタンの動作がおかしいことです。

このリンクを見てください

    _result.remove('.spanPos'); //removing
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);  //adding at new position

右ボタンを押すと、スパン要素が新しいキャレット位置に正常に削除および追加されますが、左ボタンを押すと、キャレットは次の位置ではなく最初の位置に移動します。

これに対する修正はありますか？

IE8+ と firefox で動作するソリューションを探しています (chrome はオプションです)。

4

1 に答える 1

1

私は問題を理解し、左右の誤動作を修正しました。修正が含まれている更新されたフィドルhttp://jsfiddle.net/2PS3m/5/があります。

何が起こっていたかは次のとおりです。

setAutoCompletePos() 関数では、基本的に _result 要素のコンテンツを完全に置き換えていました ( _result.html(text); )。これにより、選択が失われ、最初にジャンプしていました。

キーの誤動作のように見えたのは、実際には元のテキスト + 選択/キャレット位置の喪失でした

その解決策は、要素の内容を変更した後に restoreSelection() を実行することでした。これにより、本質的にキャレットが元の場所に戻ります。

また、キーダウンをキーアップに変更し、何かが起こる前に最初の選択を保存するために要素にマウスアップ イベントを追加しました。

このような操作では、必要な操作を実行する前にキャレットの位置を変更できるように、keydown の代わりに keyup イベントを使用するのが最適です。

mouseup イベントは基本的に、テキスト内でのユーザーのクリックをキャプチャするために使用され、コードに追加した変数にキャレットの初期位置を格納します。

setAutoCompletePos 関数は次のようになり、期待どおりに機能します。

function setAutoCompletePos() {
    var offsetPos;
    _result.remove('.spanPos');
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);
    restoreSelection(_result.get(0), _savedSel); //added this
    offsetPos = $('.spanPos').offset();
}

変更されたフィドルhttp://jsfiddle.net/2PS3m/5/からコードを取得して、それが機能するかどうか教えてください。私のテストでは、最初にカーソルがジャンプすることなく期待どおりに機能することが示されています。

于 2013-05-06T12:36:52.110 に答える