認識和不同格式的網址，保持光標到位

jQuery - Identify and mark link in textarea

我想創建一個輸入框，網址被自動識別，格式化和方法被調用網址後面或模糊處的空格上的每個URL。我們還有一個問題，儘管elem.html(newText);用於設置檢測到的鏈接周圍的格式化p標籤可以正常工作，但光標之後設置爲開頭。因此，當您編寫「這是一個www.url.com」並按空格時，URL會被正確識別和格式化，並調用方法「linkDetected」，但光標會移動到輸入字段的開頭，而不可能寫在。

我創建了一個的jsfiddle，所以你可以看到代碼和問題自己：

http://jsfiddle.net/TgAGk/1/

任何幫助表示讚賞。

來源

2013-02-11 Raphael Jeger

我最近爲contenteditable回答了一個類似的問題：http://stackoverflow.com/questions/14636218/jquery-convert-text-url-to-link-as-typing/14637351#14637351。這裏有一個例子jsFiddle：http://jsfiddle.net/8hYSc/3/。可以改進它，以便不添加指向脫字符仍然存在的文本的鏈接。 – 2013-02-11 17:19:16

更新的例子，只有在按下回車鍵或空格鍵後纔會觸發鏈接：http://jsfiddle.net/8hYSc/4/ – 2013-02-11 17:23:39

@TimDown這是相當不錯的，除非你必須輸入http：//（www。alone不會工作）和編輯鏈接或刪除後的空間和追加的東西（說你輸入「http://www.youtube.com」，刪除空間和追加「/視頻」）不起作用... – 2013-02-11 17:45:09

好，我加入了setCaret功能，我發現在這裏：

Set cursor position on contentEditable <div>（@Nico伯恩斯回答）

http://jsfiddle.net/TgAGk/2/

var nouse = 'ignore this and thanks for the unnecessary code-check';

但是，這是行不通的。有沒有人看到我的缺陷？

來源

2013-02-11 21:12:42

問題是選擇保存/恢復依賴於DOM而不是改變，而你的代碼正在取代HTML，從而更新DOM。這就是爲什麼你需要某種方式來表示獨立於DOM的選擇，例如基於字符偏移的方法。 – 2013-02-12 00:15:56

謝謝蒂姆 - 關於如何到達那裏的任何想法？如果我們只是刪除鏈接突出顯示，其他一切正常，但這不是我想要的... – 2013-02-12 06:50:15

我鏈接的示例似乎是一個合理的起點。 – 2013-02-12 13:01:12

要使用範圍和選擇很容易，請使用rangy（rangyinputs）。

來源

2013-02-11 15:37:57 oleq

我們已經考慮過rangy，但這是額外的開銷，也許還有一些其他的解決方案，因爲只剩下將光標留在那裏的問題... – 2013-02-11 15:43:39

認識和不同格式的網址，保持光標到位

回答

相關問題