光标定位~~~~~~~~~~

最新推荐文章于 2021-10-29 08:58:53 发布

sunshine 覃糖

最新推荐文章于 2021-10-29 08:58:53 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/tan_xiao_tan/article/details/113923811

版权

这是一个关于前端模板预览的示例，包括预览按钮、Modal对话框和内容区域。内容区域包含多个带有特定类名的敏感信息，如'禁用一号'和'敏感二号'。用户可以通过点击按钮进行内容选择，并使用方法`handleMouseSelect`来处理鼠标选择，但当前代码段未完全实现该功能。

摘要由CSDN通过智能技术生成


```javascript
<template>
  <div>
    <Button @click="preview">预览</Button>
    <!-- <Modal v-model="show" width="600">
      <p slot="header">
        <span>词库模板</span>
      </p>
      <div ref="htmlContent" class="htmlContent">
        <p>
          详细内容<span class="location">禁用一号</span>详细内容详细内容
          <span class="location">禁用二号</span>详细内容详细内容
          <span class="location">敏感二号</span>
        </p>
        <p>
          详细内容<span class="location">禁用一号</span>详细内容详细内容
          <span class="location">禁用二号</span>详细内容详细内容
        </p>
        <p>
          详细内容<span class="location">禁用一号</span>详细内容详细内容
          <span class="location">敏感二号</span>
        </p>
      </div>
      <div slot="footer" style="text-align: center">
        <Button type="primary" @click="confirm">确认</Button>
      </div>
    </Modal> -->
    <!-- <div v-bind="show"> -->
    <div id="box">
      这是内容哦！
      <span style="color: red">111111</span>
      <span style="color: red">222222</span>
      <span style="color: red">33333</span>
    </div>
    <button class="btn" @mouseup="handleMouseSelect('index')">click me</button>
  </div>
  <!-- </div> -->
</template>

<script>
//1.先获取元素2.查找到所有的类名3.

// var p = document.getElementById('box'),
//   s = window.getSelection(),
//   btn = document.querySelector('.btn'),
//   r = document.createRange();
// let index = 1;
// btn.onclick = function () {
//   r.setStart(p, index);
//   r.setEnd(p, index);
//   s.removeAllRanges();
//   s.addRange(r);
//   index++;
// };
import { Button } from 'view-design';
export default {
  name: 'Login',
  data() {
    return {
      show: false,
      index: 0,
    };
  },
  components: {
    // Modal,
    Button,
  },
  methods: {
    handleMouseSelect(index) {
      let ele = document.getElementById('box');
      let l = ele.length;
      let t = 0;
      let text = window.getSelection();
      let range = document.createRange();
      console.log(ele, text, range);
      range.setStart(t, index);
      range.setEnd(l, index);
      text.removeAllRanges();
      text.addRange(range);
      index++;
    },
    // get() {
    //   let ele = document.getElementById('box');
    //   let text = window.getSelection();
    //   let range = document.createRange();
    //   console.log(ele, text, range);
    // },
    preview() {
      this.show = true;
    },
    confirm() {
      //获取元素
      // setTimeout(() => {
      //   let con = this.$refs.htmlContent;
      //   let name = event.target.className;
      //   console.log(con, name);
      // }, 100);
      // let obj = {};
      // if (this.index === ind) {
      //   // 需要进行点击的时候出现的一个类名
      //   obj['ele'] = true;
      // }
      // return obj;
    },
    //dealKeyup(e) {
    // var input_val = document.getElementById('number-password-input');
    // var input_val = $(that).val();
    // var input_val = e.target.value;
    // var input_arr = input_val.split('-');
    // for (var i = 0; i < input_arr.length; i++) {
    // if (input_arr[i] == ' ') {
    //   setCaretPosition(that, i * 2);
    //   return;
    // }
    //}
    //},
    // getCursortPosition(ctrl) {
    //   var CaretPos = 0; // IE Support
    //   if (document.selection) {
    //     ctrl.focus();
    //     var Sel = document.selection.createRange();
    //     Sel.moveStart('character', -ctrl.value.length);
    //     CaretPos = Sel.text.length;
    //   }
    // Firefox support
    //   else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    //     CaretPos = ctrl.selectionStart;
    //   return CaretPos;
    // },
    // setCaretPosition(ctrl, pos) {
    //   if (ctrl.setSelectionRange) {
    //     ctrl.focus();
    //     ctrl.setSelectionRange(pos, pos);
    //   } else if (ctrl.createTextRange) {
    //     var range = ctrl.createTextRange();
    //     range.collapse(true);
    //     range.moveEnd('character', pos);
    //     range.moveStart('character', pos);
    //     range.select();
    //   }
    // },
  },
  mounted() {
    this.preview();

    //}
    // this.$nextTick(() => {
    //   this.$refs.con.focus();
    // });
    // this.dealKeyup();
    // this.getCursortPosition();
    // this.setCaretPosition();
    // function dealKeyup(that) {
    //   var input_val = $(that).val();
    //   var input_arr = input_val.split('-');
    //   for (var i = 0; i < input_arr.length; i++) {
    //     if (input_arr[i] == ' ') {
    //       setCaretPosition(that, i * 2);
    //       return;
    //     }
    //   }
    // }
    //   function getCursortPosition(ctrl) {
    //     var CaretPos = 0;   // IE Support
    //     if (document.selection) {
    //         ctrl.focus();
    //         var Sel = document.selection.createRange();
    //         Sel.moveStart ('character', -ctrl.value.length);
    //         CaretPos = Sel.text.length;
    //     }
    //     // Firefox support
    //     else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    //         CaretPos = ctrl.selectionStart;
    //     return (CaretPos);
    // }
    // 设置光标位置
    // function setCaretPosition(ctrl, pos){
    //     if(ctrl.setSelectionRange)
    //     {
    //         ctrl.focus();
    //         ctrl.setSelectionRange(pos,pos);
    //     }
    //     else if (ctrl.createTextRange) {
    //         var range = ctrl.createTextRange();
    //         range.collapse(true);
    //         range.moveEnd('character', pos);
    //         range.moveStart('character', pos);
    //         range.select();
    //    }
  },
};
</script>

<style lang="less" scoped>
.location {
  color: orange;
}
</style>