原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：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>
网友评论