Web API Selection.type用法及代碼示例

Web API Selection.type 用於獲取用戶選擇的文本範圍或插入符號的位置。 window.getSelection()用於獲取選擇對象。

用法:

let selection = window.getSelection( );

它帶有一些實例屬性，其中之一是類型.

Selection.type：它是一個隻讀屬性，告訴用戶所做的選擇類型。它有 3 個可能的值。

none:未進行任何選擇
caret: 當選擇內容折疊或插入符號放置在選擇點時。
range: 當選擇一係列字符時。

示例 1：在此示例中，我們將檢測選擇的類型並使用Selection.type。為了檢測選擇的類型，我們將利用選擇改變事件。輸出顯示類型屬性的所有三個值。當您取消選擇某些內容時，它會返回“none”。當您取消選擇已選擇的內容時，它會返回 “caret” 值。當您選擇字符範圍時，它返回“range”值。

HTML


<html> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>  Web API Selection.type property </h3> 
    <script>     
        document.onselectionchange = () => { 
            let selection = document.getSelection(); 
            console.log(selection.type); 
        }; 
    </script> 
</body> 
</html>

輸出：

示例 2：在此示例中，我們將從文檔中刪除所選文本並將其打印在控製台上以便更好地理解。

HTML


<html> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>  Web API Selection.type property </h3> 
    <script>     
        document.onselectionchange = () => { 
            let selection = document.getSelection(); 
            console.log(selection.toString()) 
            selection.deleteFromDocument(); 
        }; 
    </script> 
</body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自nikhilkalburgi大神的英文原創作品 Web API Selection.type Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。