js 公式编辑器 - 自定义匹配规则 - 带提示下拉框(2)

日期：2020-05-11 栏目：程序人生浏览：次

　插入输入框　

　首先插入下拉框，当然留到后面插入也可以（你开心你说什么都是对的），但是这里有个点需要注意一下：为什么选择插入在body下？因为我们获取到的下拉框的位置是绝对定位坐标。

 // 插入下拉框
 _this.dropdown = $('<ul class="editTips" style="display:none;"></ul>');
// 获取到的弹出的下拉框的位置是绝对定位的坐标，所以得把弹出的层放到$("body").after(_this.dropdown);   
 _this.dropdown.css({
 'width':opts.dropdownWidth,
 'position':'absolute',
 });
 _this.css({
 'position': 'relative',
 });

　注意：这里我们提一下，要获取检索值，即 selectVal，我们需要知道事件触发时光标所在的位置，即 oldCurrentPos，以及光标当前位置 currentPos，有了这两个下标，我们才能动态获取 selectVal

　获取光标当前位置

　关于获取输入框光标以及获取值等方法，不了解的朋友可以去看一下 range 方法，当然无数前辈已经做过无数归纳总结讲解（向前辈们敬礼~）：

 // 获取当前光标位置 currentPos
  var getStart =function() {  
   var all_range = '';
   if (navigator.userAgent.indexOf("MSIE") > -1) { //IE
   if( _this.get(0).tagName == "TEXTAREA" ){ 
    // 根据body创建textRange
    all_range = document.body.createTextRange();
    // 让textRange范围包含元素里所有内容
    all_range.moveToElementText(_this.get(0));
   } else {
    // 根据当前输入元素类型创建textRange
    all_range = _this.get(0).createTextRange();
   }
   // 输入元素获取焦点
   _this.focus();
   // 获取当前的textRange,如果当前的textRange是一个具体位置而不是范围,textRange的范围从currentPos到end.此时currentPos等于end
   var cur_range = document.selection.createRange();
   // 将当前的textRange的end向前移"选中的文本.length"个单位.保证currentPos=end
   cur_range.moveEnd('character',-cur_range.text.length)
   // 将当前textRange的currentPos移动到之前创建的textRange的currentPos处, 此时当前textRange范围变为整个内容的currentPos处到当前范围end处
   cur_range.setEndPoint("StartToStart",all_range);

   // 此时当前textRange的Start到End的长度,就是光标的位置
   currentPos = cur_range.text.length;
   } else {
   // 文本框获取焦点
   _this.focus();
   // 获取当前元素光标位置
   currentPos = _this.get(0).selectionStart;
   //console.log("光标当前位置:"+currentPos);
   }
   // 返回光标位置
   return currentPos;
  };

　　获取检索值开始位置

　　检索开始位置，即事件触发时光标所在位置，直白来说，就是把事件触发时光标所在位置 currentPos 赋值给 oldCurrentPos 储存起来，然后与新的 currentPos 组

js 公式编辑器 - 自定义匹配规则 - 带提示下拉框(2)

相关推荐