如何在Twitter或Facebook等keydown事件上替換散列標記。 javascript // jquery

我有contentEditable元素（也許是div ...），我想在keydown事件上替換hash標籤或者像twitter（或者facebook）那樣的url。如何在Twitter或Facebook等keydown事件上替換散列標記。 javascript // jquery

我通常可以用下面這樣archieve吧..

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

    }

這正常替換文本..上keydown事件。

但是當我設置替換的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(); 
        } 
       } 
     }

任何人都可以拿出解決這個問題？或給我一個鏈接.....

來源

2013-08-21 Kong2

只要文本內容保持不變，您就可以通過字符索引保存和恢復選擇範圍。我提供了簡單的功能，在這裏做這樣的：

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

來源

2013-08-21 09:00:20

THX了很多。它運作良好。 – Kong2

我可以再問一個問題嗎？我替換了這樣的散列標籤 - >＃ test 並且遊標是「test」文本的結尾。我想在按空格鍵時使光標退出標記。但它不起作用;;光標仍然在標記中。我不知道如何修復它。 PLZ給我一個解決方案或鏈接... ...我很抱歉，我不能投票，因爲我有10個聲望.. ;; – Kong2

如何在Twitter或Facebook等keydown事件上替換散列標記。 javascript // jquery

回答

相關問題