支持select下拉框选择输入和键盘输入两种输入方式并且支持手动换行

小咪咪 2022-01-22 06:37 942阅读 0赞

**1、需求目标**

*  是一个用户输入区域
 *  支持键盘输入内容
 *  支持从select下拉框中选择某一项可以塞入光标所在任意位置，塞入的select项有样式效果。
 *  支持换行

**2、难点**

光标所在位置怎么获取，如何将选择的项塞入光标位置。

解决：在翻阅了文档、博客之后，发现了一个方法window.getSelection()，该方法用于返回选择的文本或者光标所在的位置。

之后使用`getSelection().getRangeAt(0)`获取当前光标的位置，然后在这个位置插入select选项。

但这个方法在标签input和textarea中不起作用。

// 获取光标位置
     this.sel = window.getSelection(); // 返回选中的文本或者光标所在位置
     this.range = this.sel.getRangeAt(0); // 获取选择范围

**3、contenteditable="true"**

默认情况下，标签是不可编辑的。加上contenteditable="true"之后使得标签可编辑。

**4、选择select的项**

(1) 希望选中的项有样式。

解决方法：新建标签，将select项的值塞入标签，并给这个标签添加样式

(2) 问题： 如果元素设置了contenteditable="true"，那么它的子元素可以变成可编辑的。如果不做处理插入的select选项可以被编辑。

解决方法：给塞入的select项设置contenteditable="false";

let selectItem = document.createElement("span");
          selectItem.innerText = data.label;
          selectItem.setAttribute("style", ITEM_STYLES);
          selectItem.setAttribute("contenteditable", false);
          this.insertItem(selectItem);

**5、实现效果**

![20201027185540741.gif][]

**6、整体代码**

<template>
      <div>
        <el-select v-model="val" aria-placeholder="请选择...">
          <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="selectItem(item)"
          ></el-option>
        </el-select>
          <div
            class="tt"
            contenteditable="true"
            @keydown="here()"
            @click="here()"
          ></div>
        </div>
    </template>
    <script>
    
    const ITEM_STYLES =
      "margin:0 5px;background-color:lightblue;border-radius:5px;color:#fff;word-break:keep-all;margin:0 8px;margin-top:12px;-webkit-user-select:none;display:inline-block;";
    export default {
      data() {
        return {
          val: "", // select的内容
          sel: null, //
          range: null,
          list: [
            {
              value: "xingqiyi",
              label: "今天星期一",
            },
            {
              value: "xingqier",
              label: "今天星期二",
            },
            {
              value: "xingqisan",
              label: "今天星期三",
            },
            {
              value: "xingqisi",
              label: "今天星期四",
            },
            {
              value: "xingsiwu",
              label: "今天星期五",
            },
          ],
        };
      },
      mounted() {},
      methods: {
        // 获取光标所在位置
        here() {
          this.sel = window.getSelection(); // 返回选中的文本或者光标所在位置
          this.range = this.sel.getRangeAt(0); // 获取选择范围
        },
        selectItem(data) {
          let selectItem = document.createElement("span");
          selectItem.innerText = data.label;
          selectItem.setAttribute("style", ITEM_STYLES);
          selectItem.setAttribute("contenteditable", false);
          this.insertItem(selectItem);
        },
        insertItem(html) {
          if (!this.range) {
            return;
          }
    
          
          let frag = document.createDocumentFragment(); //创建一个虚拟的节点对象，便于之后插入dom树
          let node = html;
          let lastNode = frag.appendChild(node); 
          this.range.insertNode(frag); //设置选择范围的内容为插入的内容
          let contentRange = this.range.cloneRange(); //克隆选区
          contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
          contentRange.collapse(true); //移动光标位置到末尾
          this.sel.removeAllRanges(); //移出所有选区
          this.sel.addRange(contentRange); // 添加到选区（Selection）当中。
        },
      },
    };
    </script>
    <style  scoped>
    .tt {
      width: 460px;
      height: auto;
      min-height: 220px;
      margin-left: 300px;
      background-color: #fff;
      border: 1px solid #000;
      padding: 12px 5px;
      outline: none;
      text-align: left;
    }
    </style>

**7、问题**

基本功能是已经有了，但是测试过后发现仍然存在很多问题

1.  每次键盘输入内容要，需要点击，手动获取光标位置，不能直接塞入到文字末尾。手动点击一下则结果正常。
2.  不能直接选择select的项塞入，因为此时没有获取光标位置。

问题1的解决：

每次键盘输入后，监听keyup事件 ，重新获取光标位置即可、

<div  contenteditable="true" @keyup="here()"></div>
    
    <script>
      method:{
        here(){
           this.sel = window.getSelection(); // 返回选中的文本或者光标所在位置
          this.range = this.sel.getRangeAt(0); // 获取选择范围
        }
    }
    </script>

现在每次键盘输入之后，就不需要手动点击了。。。可以直接将select的选项添加到键盘输入的文本结尾处。。

![20201027193239174.gif][]

问题2的解决。。。。。

##      ##

[20201027185540741.gif]: /images/20220122/c98d11ff9c264c6087963afc4149a89f.png
[20201027193239174.gif]: /images/20220122/b99aabb65d5f4977aef1df3580ba1676.png