onSelect 事件

作用：当文本被选中时，执行一段 Javascript代码 

定义和用法：

onselect 事件会在文本框中的文本被选中时发生

onselect 在 HTML 中：

onselect 属性可用于: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>.

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction(){
	alert("你选中了一些文本");
}
</script>
</head>
<body>

一些文本: <input type="text" value="Hello world!" onselect="myFunction()">

</body>
</html>

onselect 事件 | 菜鸟教程

思路：主要是 借用 event 获取 其值 和 selectionStart 选中下标起始  selectionEnd 选中的下标结束。然后字符串截取出来。

vue中使用 并且获取选中的值

<template>
<div>
<input   value="你好啊!!!!!!你好啊!!!!!!你好啊!!!!!!" @select="testSelect"/>
 你选中了：{{txt}}
</div>
  </template>
data() {
        return {
           txt:""
        }
      },
methods:{
        testSelect(e){
           let start=e.target.selectionStart;
           let end=e.target.selectionEnd;
           let value= e.target.value;                   console.log(e.target.selectionStart,e.target.selectionEnd,e.target.value);
          
          let selectVal="";
          if(value&&end!=0){ //防止 没选中
               selectVal=value.slice(start,end);
          }
          console.log(selectVal)
            this.txt=selectVal;
        }
      }

兼容写法：

testSelect(event){
             
        var e=event||window.event; //兼容写法
        var target=e.target||e.srcElement; //兼容写法
             
           let start=target.selectionStart;
           let end=target.selectionEnd;
           let value= target.value;                   console.log(target.selectionStart,target.selectionEnd,target.value);
          
          let selectVal="";
          if(value&&end!=0){ //防止 没选中
               selectVal=value.slice(start,end);
          }
          console.log(selectVal)
           this.txt=selectVal;
        }

在线 案例 ：vue select 获取选中值

js 中使用 并且获取选中的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onselect 获取选中值</title>
</head>

<body>
    <input value="你好啊!!!!!!你好啊!!!!!!你好啊!!!!!!" onselect="testSelect(event)" />
    你选中了：<p id="txt"></p>
</body>
<script>
    //主要是 借用 event 获取 其值 和 selectionStart 选中下标起始  selectionEnd 选中的下标结束
    function testSelect(event) {
        let e=event;
        let start = e.target.selectionStart;
        let end = e.target.selectionEnd;
        let value = e.target.value; console.log(e.target.selectionStart, e.target.selectionEnd, e.target.value);

        let selectVal = "";
        if (value && end != 0) { //防止 没选中
            selectVal = value.slice(start, end);
        }
        console.log(selectVal)
        let txt=document.getElementById("txt");
        txt.innerText=selectVal;
    }
</script>

</html>

event 有兼容问题  兼容写法：

//主要是 借用 event 获取 其值 和 selectionStart 选中下标起始  selectionEnd 选中的下标结束
    function testSelect(event) {
        var e=event||window.event; //兼容写法
        var target=e.target||e.srcElement; //兼容写法
        let start = target.selectionStart;
        let end = target.selectionEnd;
        let value = target.value; 
        console.log(target.selectionStart, target.selectionEnd, target.value);

        let selectVal = "";
        if (value && end != 0) { //防止 没选中
            selectVal = value.slice(start, end);
        }
        console.log(selectVal)
        let txt=document.getElementById("txt");
        txt.innerText=selectVal;
    }


补充：

获取 鼠标 光标选中的值 可以使用 window.getSelection();

例如：

//鼠标监听,当释放鼠标的时候，调用testSelection()方法。
    document.onmouseup = function () {
        testSelection();
    }
    function testSelection() {
        //获取Selection对象
        let selection = window.getSelection();
        //调用selection对象的toString()方法就可以获取鼠标拖动选中的文本。
        console.log("选中的文本为：");
        console.log(selection.toString());
    }

利用这个可以实现一些 简单的标注功能，比如鼠标选中，然后给选中的文本加 下划线 、背景色等等 。具体 可参考 ：

Window getSelection() 方法