怎么获取 @select input中的某段内容

目的,给某几个字,改变字体,或字体色

  <input   value ='你好啊!!!!!!你好啊!!!!!!'你好啊!!!!!!'' @select="testSelect"/>

function tsetSelect(event){
   // 如果用鼠标选了 input中的 某段 字,        怎么取得 选择 的内容
  // 在控制台没看到 event 有 这个信息
}

获取选中的内容可以window.getSelection().toString()，但是加颜色不是input内容做的，需要用可编辑edit或者iframe，类似web编辑器，下面简单示例

<div contenteditable="true" style="height:200px;width:300px;border:solid 1px #ccc;padding:5px">
    你好啊!!!!!!你好啊!!!!!! 你好啊!!!!!!
</div>
<input type="button" value="变红" onclick="setFormatter('color:red')" /><input type="button" value="加粗" onclick="setFormatter('font-weight:bold')"  />
<script>
    function setFormatter(css) {
        var selection = window.getSelection();
        var s = selection.toString();
        if (s) {
            var range = selection.getRangeAt(0);
            var span = document.createElement('span');
            span.style.cssText = css;
            span.innerText = s;
            range.surroundContents(span);
        }
    }
</script>

input.value.substring(input.selectionStart,input.selectionEnd);

获取到值然后截取，给其加一个标签容器，再加样式

下面这样可以获取到

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

在线示例 https://codepen.io/guyu521/pen/ExEvZEm

其实你是想要或者鼠标选中的文字是哪些对吧,可以参考下面的博客
https://blog.csdn.net/mouday/article/details/125359340


<!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>Document</title>
</head>

<body>
    <input type="text" value="如果用鼠标选了input中的某段字" onclick="tsetSelect()">
    <div></div>
    <script>
        function tsetSelect() {
            var value = document.querySelector("input[type=text]").value;
            var select = value.substring(7,12);
            var div = document.querySelector("div");
            div.innerHTML = select;
            div.style.color = "red";
            div.style.fontSize = "20px";
        }
    </script>

</body>

</html>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

怎么获取 @select input中的 某段内容

怎么获取 @select input中的某段内容