獲取內容可編輯元素中的選定文本

Question

我想進行文本編輯，並更改內容可編輯元素內部的文本，並由用戶選擇。

我的問題是： 如何在內容可編輯元素中獲取選定的文本？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"  src="D:\JQueryPath\jquery-3.1.1.js">         </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#show").click(function(){
            //alert("selected texts");
            });
        });
    </script>
</head>
<body>
<div  id="textEditor" style=" border:solid 1px #D31444" contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>

Answer 1

這將使您入門，盡管您將需要考慮擴展此代碼以適應有人在您的文本區域之外進行選擇以及有人按下按鈕而未選擇任何內容的情況。

哦，我讓控制台記錄了輸出而不是警告它。

$(document).ready(function(){
  $("#show").click(function(){
    range = window.getSelection().getRangeAt(0);
    console.log(range.toString());
  });
});

Answer 2

您可以使用window.getSelection()方法。

Answer 3

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"  src="D:\JQueryPath\jquery-3.1.1.js"> </script>
  <script type="text/javascript">
    $(document).ready(function(){
        $("#show").click(function(){
        alert(window.getSelection().toString());
        });
    });
</script>
</head>
<body>
<div  id="textEditor" style=" border:solid 1px #D31444"contenteditable="true" ></div>
<p></p>
<button id="show">show selected elements</button>
</body>
</html>

獲取內容可編輯元素中的選定文本

問題描述

3 個解決方案

解決方案1
1 已采納 2017-02-28 11:08:28

解決方案2
0 2017-02-28 10:18:56

解決方案3
0 2017-02-28 11:07:12

獲取內容可編輯元素中的選定文本

問題描述

3 個解決方案

解決方案1 1 已采納 2017-02-28 11:08:28

解決方案2 0 2017-02-28 10:18:56

解決方案3 0 2017-02-28 11:07:12

解決方案1
1 已采納 2017-02-28 11:08:28

解決方案2
0 2017-02-28 10:18:56

解決方案3
0 2017-02-28 11:07:12