[问题探讨]select()实现文本默认选中以及setSelectionRange()实现获取用户选择的文本内容

最新推荐文章于 2023-07-24 04:43:50 发布

tom_wong666

最新推荐文章于 2023-07-24 04:43:50 发布

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏：问题探讨文章标签： js select input text

本文链接：https://blog.youkuaiyun.com/tom_wong666/article/details/97132427

问题探讨专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何使用JavaScript的select()方法自动选中元素内文本，提升用户体验，以及通过setSelectionRange()获取用户在指定元素上选择的文本内容。提供了解决这两种场景的代码实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

在需要大量复制黏贴的场景中，自动选择指定元素内所有文本，可以减少用户点选操作，提升交互体验；
另外，也有一些场景需要获取用户在指定元素上选择的内容。
本文参考《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>

点击此超链接跳转到Tom哥的博文分类和索引页面
Tom哥的博客博文分类和索引页面地址：https://blog.youkuaiyun.com/tom_wong666/article/details/84137820