vuejs2.0 系统文章书籍标引标记、鼠标开始结束下标获取、截取文章(基础版)...

这里写图片描述
HTML

<div class="box_fr">
        <textarea name="" class="textarea" ref="textarea" v-model="msg" @click="getSelectPosition">{{msg}}</textarea>
        <!-- 参数结果 -->
        <div>焦点位置:<input type="text" id="txt1" value=""><br/></div>
        <div>选中起始位置:<input type="text" id="txt2" value=""></div>
        <div>选中结束位置<input type="text" id="txt3" value=""><br/></div>
        <div>选中内容: <div id="txt4"></div></div>
      </div> 

Javascript-method

getSelectPosition: function(){
      var nullvalue = -1;
      var selectStart ;//选中开始位置
      var selectEnd ;//选中结束位置
      var position;//焦点位置
      var selectText;//选中内容
      const oTxt = this.$refs.textarea;
      if(oTxt.setSelectionRange){//非IE浏览器
        selectStart= oTxt.selectionStart;
        selectEnd = oTxt.selectionEnd;
        if(selectStart == selectEnd){
          position = oTxt.selectionStart;
          selectStart = nullvalue;
          selectEnd = nullvalue;
        }else{
          position =  nullvalue;
        }
        selectText = oTxt.value.substring(selectStart,selectEnd);
            }else{//IE
                var range = document.selection.createRange();
        selectText=range.text;
                range.moveStart("character",-oTxt.value.length);
        position = range.text.length;
        selectStart = position - (selectText.length);
        selectEnd = selectStart + (selectText.length);
        if(selectStart != selectEnd){
          position = nullvalue;
        }else{
          selectStart = nullvalue;
          selectEnd = nullvalue;
        }
            }
      document.getElementById("txt1").value=position;
      document.getElementById("txt2").value=selectStart;
      this.getBstart = selectStart
      document.getElementById("txt3").value=selectEnd;
      this.getBend = selectEnd
      document.getElementById("txt4").innerHTML=selectText;
      this.getBtext = selectText
      this.$ls.set('selectText', selectText) //存到缓存
    }

Demo下载(兼容IE、火狐、谷歌):点击下载

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值