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

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"之后使得标签可编辑。

<div contenteditable="true"></div>

4、选择select的项<