0

contentEditable 要素 (おそらく div...) があり、keydown イベントで twitter(または facebook) のようなハッシュ タグまたは URL を置き換えたいと考えています。

私は通常、以下でこれをアーカイブできます..

    //onKeydown Event
    ....

    _this.saveRange();   // save current range

    var string = _this.getHtml();    //_this is contentEditable element (div)

    var reg = /(:?#{1}|\s#{1})([A-Za-z0-9.;_\-ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+)/gm;

    if(reg.test(string)) {
        var text = string.replace(reg, function(u) {
            return '<a class="highlight" rel="external" id="test">' + u + '</a>';
        });

        _this.setHtml(text);    // insert html what replaced using innerHtml 

        _this.restoreRange();

    }

これは正常に機能し、テキストを置き換えます..キーダウンイベントで。

しかし、置き換えたhtmlを設定すると、ドキュメント範囲（カーソル）が最初の位置に移動します。

これは問題です。

innerHtml の前に範囲を保存し、innerHtml の後に範囲を復元しました。しかし、うまくいきません。

その下では、関数 saveRange と restoreRange を使用しました。

    var savedRange;   //public variable

    function saveRange() {
        if(window.getSelection) {
            savedRange = window.getSelection().getRangeAt(0);
        } else if(document.selection) {  //IE
            savedRange = document.selection.createRange();
        }
    }    



     function restoreRange() {
            if (savedRange != null) {
                    if (window.getSelection)//non IE and there is already a selection
                    {
                        var s = window.getSelection();
                        if (s.rangeCount > 0) 
                            s.removeAllRanges();
                        s.addRange(savedRange);
                    }
                    else if (document.createRange)//non IE and no selection
                    {
                        window.getSelection().addRange(savedRange);
                    }
                    else if (document.selection)//IE
                    {
                        savedRange.select();
                    }
                }
         }

誰かがこれに対する解決策を思い付くことができますか??? またはリンクを教えてください.....

4

1 に答える 1

0

テキストの内容が同じままである限り、文字インデックスによって選択範囲を保存および復元できます。ここでこれを行うための簡単な関数を提供しました：

https://stackoverflow.com/a/17694760/96100

于 2013-08-21T09:00:20.040 に答える