BOM Range對象文字內容選中

isaced 發布于2019-08-20 14:47 / 1704人閱讀

摘要：參數被選中的第一個字符的位置。對象什么是對象表示包含節點和部分文本節點的文檔片段。一切有關于戶文本選擇范圍的信息都歸對象掌管。用對象的方法取得。

最初是因為textarea賦值后，focus光標一直定位到第一個文字的bug，搜之，發現有這樣一個API：HTMLInputElement.setSelectionRange,可以設置一個input元素中的文本選中內容的起始位置和結束位置。

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

參數
    selectionStart
    被選中的第一個字符的位置。
    selectionEnd
    被選中的最后一個字符的 下一個 位置。
    selectionDirection (可選)
    一個指明選擇方向的字符串，有"forward","backward"和"none" 3個可選值, 分別表示"從前往后", "從后往前"和"選擇方向未知或不重要"。

然后發現了range對象覺得有點厲害，寫個文章學習一下。

Range對象

什么是range對象？Range表示包含節點和部分文本節點的文檔片段。一切有關于戶文本選擇范圍的信息都歸range對象掌管。例如：

但是在瀏覽器的發展歷史中，衍生出了3個功能類似的對象,分別為W3C range,MOZ selection,IE textRange。

W3C range

range對象如何來？

Document 對象的 createRange方法創建。

用Selection對象的getRangeAt方法取得。

通過構造函數 Range()。
API

MOZ selection

通過window.selection獲取Seletion對象。
API

IE textRange

textRange

實現

可以做一些@出現用戶名稱效果和#話題#，復制時帶上自信息。

GPU云服務器云服務器 Range對象文字選中被選中文字選中文本內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81922.html

原生JS寫一個功能強大的編輯器

摘要：主要采用了原生與調用結合的功能實現功能。所以根據這種方法，讀者可以根據自己的需求添加更多的功能，比如在編輯框里面插入一個可以點擊的標簽或者添加一個代碼塊希望能讀到此文章的讀者，能在下方一起交流，更希望大佬提出錯誤，謝謝地址因為一個同學，要做一個能加入圖片的留言板功能，類型與QQ空間留言板和百度貼吧發帖的那種形式，同時在網上找了找發生網上對這方面的交流很少，所以發表這篇文章拋磚引玉，希...

luck 2019-08-21 17:09 評論0 收藏0
原生JS寫一個功能強大的編輯器

摘要：主要采用了原生與調用結合的功能實現功能。所以根據這種方法，讀者可以根據自己的需求添加更多的功能，比如在編輯框里面插入一個可以點擊的標簽或者添加一個代碼塊希望能讀到此文章的讀者，能在下方一起交流，更希望大佬提出錯誤，謝謝地址因為一個同學，要做一個能加入圖片的留言板功能，類型與QQ空間留言板和百度貼吧發帖的那種形式，同時在網上找了找發生網上對這方面的交流很少，所以發表這篇文章拋磚引玉，希...

王晗 2019-08-01 17:48 評論0 收藏0
你可能不知道的JS關于選中文本區域的操作

摘要：先普及一些關于文本選擇范圍的基礎知識。可以調用的方法，結果就會打印出我們選擇的文本內容。用腳本可以實現中包含多個的情況。表示當前范圍是否是閉合的。則表示當前范圍的起始和結束是同一個位置。表示共同的祖先節點。聲明：今天所分享的內容，都可以直接在控制臺演示。先來思考幾個問題。1.我在一個頁面中隨意點了一下，沒有留下任何痕跡。你能捕捉到我剛才點的是哪個節點，以及鼠標的落腳點在哪兩個字之間嗎...

0xE7A38A 2019-08-02 15:39 評論0 收藏0
你可能不知道的JS關于選中文本區域的操作

摘要：先普及一些關于文本選擇范圍的基礎知識。可以調用的方法，結果就會打印出我們選擇的文本內容。用腳本可以實現中包含多個的情況。表示當前范圍是否是閉合的。則表示當前范圍的起始和結束是同一個位置。表示共同的祖先節點。聲明：今天所分享的內容，都可以直接在控制臺演示。先來思考幾個問題。1.我在一個頁面中隨意點了一下，沒有留下任何痕跡。你能捕捉到我剛才點的是哪個節點，以及鼠標的落腳點在哪兩個字之間嗎...

lauren_liuling 2019-08-26 10:23 評論0 收藏0