vue、js onSelect事件获取选中的值

onselect属性可用于,,,,和.主要是借用event获取其值和selectionStart选中下标起始selectionEnd选中的下标结束。然后字符串截取出来。作用当文本被选中时，执行一段Javascript代码。onselect事件会在文本框中的文本被选中时发生。vue、js onSelect事件获取选中的值......

崽崽的谷雨

5896人浏览 · 2022-07-26 08:30:00

崽崽的谷雨 · 2022-07-26 08:30:00 发布

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());
    }

利用这个可以实现一些简单的标注功能，比如鼠标选中，然后给选中的文本加下划线、背景色等等。具体可参考：js 利用window.getSelection() 实现简单的文字标注（鼠标选中文本，给其加下滑线、背景色）

Window getSelection() 方法