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 个答案: