1

contentEditable DIVがあり、ユーザーがキーを押すと、基になるコードが処理され、更新されたコードに置き換えられます。残念ながら、これによりカーソル位置が失われます。

ただし、カーソル位置を保持するために、<span id="placeholder"></span>処理を開始する前に、DIVの正しい位置にaを正常に挿入しています。これにより、カーソルの意図した位置が保持されますが、選択する範囲を設定できないようです。

これが私が現在持っているものです：

function focusOnPlaceholder() {

    var placeholder = document.getElementById('placeholder');

    if( !placeholder ) return;

    var sel, range;

    if (window.getSelection && document.createRange) {                    
        range = document.createRange();
        range.selectNodeContents(placeholder);
        range.collapse(true);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(placeholder);
        range.select();
    }

}

どんな助けでもありがたいです、そしてクロスブラウザソリューションは信じられないでしょう:)

4

1 に答える 1

4

クロスブラウザソリューションは、私のRangyライブラリを使用することです。具体的には、選択の保存/復元モジュールを使用します。これは、同様のプレースホルダー手法を使用し、十分にテストされています。ただし、これは、ライブラリを使用せずに、プレースホルダー要素内にコンテンツ（たとえば、改行しないスペース（\u00A0または&nbsp;HTML））を配置することで修正できる可能性がfocusOnPlaceholder()あります。範囲を選択した後、プレースホルダーを削除することをお勧めします。

于 2011-02-16T00:43:24.260 に答える