原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

问题：

在需要大量复制黏贴的场景中，自动选择指定元素内所有文本，可以减少用户点选操作，提升交互体验；
另外，也有一些场景需要获取用户在指定元素上选择的内容。
本文参考《JavaScript高级程序设计（第3版》整理如下代码，给以上两个问题提供一种解决思路。

正文：

一，自动选择指定元素内所有文本

<html lang="zh-en">
    <head>
    </head>
    <body>
        <input type="text" value="hello world" id="myInput"></input>
        <script>
            // 获取input元素
            var myInput =  document.getElementById('myInput');
            // select()默认选中全部元素：元素会直接获取焦点，并显示被选中的内容
            myInput.select();
        </script>
    </body>
</html>

二，获取用户在指定元素上选择的内容

<html lang="zh-en">
    <head>
    </head>
    <body>
        <input type="text" value="hello world" id="myInput" autofocus></input>
        <script>
            // 获取input元素
            var myInput =  document.getElementById('myInput');
            // setSelectionRange(1,5)默认选中指定元素的指定内容，参数定义同slice
            // 虽然会选中指定的内容，但是不会直接显示被选中的内容
            // 要看到选择的文本，必须在调用 setSelectionRange()之前或之后立即将焦点设置到文本框
            // 本例中在元素上加了autofocus属性以实现此效果
            myInput.setSelectionRange(1,5);
            // 监控光标在元素内移动的事件
            myInput.onmousemove =  function() {
                // 获取选中状态的偏移值，并以此计算用户选择的内容
                const slectText = myInput.value.slice(myInput.selectionStart,myInput.selectionEnd);
                console.log(slectText);
            }
        </script>
    </body>
</html>