js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)

更新時(shí)間：2018年01月04日 09:43:13 作者：謊言讓你心安

這篇文章主要介紹了js公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)的方法，,需要的朋友可以參考下

引言

　　前段時(shí)間發(fā)了一個(gè)編輯器的插件，忙完后自己再次進(jìn)行了詳細(xì)的測(cè)試，然后心里冒出一句：“這誰寫的這么奇葩的插件？完全沒什么luan用??！”

自己做了讓自己不滿意的事，咋整？男人不怕累，花了時(shí)間重寫（為世界上所有像我一樣勤勞的男人點(diǎn)贊）~

思維導(dǎo)圖

　　在小生看來，在開發(fā)每一個(gè)新功能的時(shí)候都應(yīng)該做到心中有一張思維導(dǎo)圖：功能實(shí)現(xiàn)邏輯和實(shí)現(xiàn)功能大致的方法。當(dāng)然我們不可能在還沒動(dòng)手

前就考慮得面面俱到，但在正式開發(fā)之前心里對(duì)整個(gè)流程有個(gè)清晰的印象肯定會(huì)讓我們?cè)趧?dòng)手時(shí)愈加流暢（喝口娃哈哈美滋滋，看圖~）：

流程效果圖

　　觸發(fā)檢索事件字符可自定義，默認(rèn)為 $，輸入 $ 觸發(fā)檢索顯示，此時(shí)檢索值為空，所以顯示所有選項(xiàng)，繼續(xù)輸入 a ，檢索值為 a，顯示匹配選項(xiàng)，當(dāng)再輸入 . 時(shí)，檢索值獲取條件發(fā)生改變（具體我們等下看代碼），

圖四中為整個(gè)流程在控制臺(tái)中的記錄。

js代碼 -- 監(jiān)聽輸入框

　全局變量

　考慮到里面小方法比較多，為了簡(jiǎn)化代碼，這里我選擇模塊化一下，需要用到以下全局變量。這里特別提一下：持續(xù)事件和點(diǎn)事件的區(qū)別，持續(xù)顧名思義，持續(xù)事件就是一直觸發(fā)的事件，這里 $ 觸發(fā)檢索事件后，檢索值 selectVal

　是變化的，但是我們又不需要它一直處于觸發(fā)狀態(tài)，怎么辦呢？對(duì)，開關(guān)，我們可以給這個(gè)事件設(shè)置一個(gè)開關(guān)，條件滿足時(shí)打開開關(guān)，事件持續(xù)觸發(fā)，結(jié)束后關(guān)閉開關(guān)，結(jié)束檢索事件，這里設(shè)置的開關(guān)是：searchStart；而點(diǎn)事件

　這里就是輸入 . 時(shí)觸發(fā)的事件，它只需要在輸入 . 時(shí)獲取相關(guān)的值就行了，不需要連續(xù)觸發(fā)，這里我們?cè)O(shè)置參數(shù) enterCharacter ：當(dāng)前輸入的字符

var _this = $(this);
var e = event || window.event; // 鍵值兼容
var searchStart = false; // 設(shè)置檢索事件開關(guān)
var checkCharacter = false; // 輸入字符檢索開關(guān)  
var oldCurrentPos = ''; // 檢索值開始的位置
var currentPos = ''; // 檢索值結(jié)束的位置
var selectVal = ''; // 檢索值
var pos = ''; // 設(shè)置光標(biāo)位置
var enterCharacter = ''; // 當(dāng)前輸入的字符
var dotVal; // 輸入 . 時(shí)從0到當(dāng)前光標(biāo)位置文本
var dotDollerPos; // 獲取往后查找離 . 最近的 $ 的下標(biāo)，引文輸入 . 時(shí)的檢索值即dotSelectVal不包含 $ 本身，所以需要加1 
var dotSelectVal; // 輸入 . 時(shí)的檢索值

　插入輸入框　

　首先插入下拉框，當(dāng)然留到后面插入也可以（你開心你說什么都是對(duì)的），但是這里有個(gè)點(diǎn)需要注意一下：為什么選擇插入在body下？因?yàn)槲覀儷@取到的下拉框的位置是絕對(duì)定位坐標(biāo)。

 // 插入下拉框
 _this.dropdown = $('<ul class="editTips" style="display:none;"></ul>');
// 獲取到的彈出的下拉框的位置是絕對(duì)定位的坐標(biāo)，所以得把彈出的層放到$("body").after(_this.dropdown);   
 _this.dropdown.css({
 'width':opts.dropdownWidth,
 'position':'absolute',
 });
 _this.css({
 'position': 'relative',
 });

　注意：這里我們提一下，要獲取檢索值，即 selectVal，我們需要知道事件觸發(fā)時(shí)光標(biāo)所在的位置，即 oldCurrentPos，以及光標(biāo)當(dāng)前位置 currentPos，有了這兩個(gè) 下標(biāo)，我們才能動(dòng)態(tài)獲取 selectVal

　獲取光標(biāo)當(dāng)前位置

　關(guān)于獲取輸入框光標(biāo)以及獲取值等方法，不了解的朋友可以去看一下 range 方法，當(dāng)然無數(shù)前輩已經(jīng)做過無數(shù)歸納總結(jié)講解（向前輩們敬禮~）：

 // 獲取當(dāng)前光標(biāo)位置 currentPos
  var getStart =function() {  
   var all_range = '';
   if (navigator.userAgent.indexOf("MSIE") > -1) { //IE
   if( _this.get(0).tagName == "TEXTAREA" ){ 
    // 根據(jù)body創(chuàng)建textRange
    all_range = document.body.createTextRange();
    // 讓textRange范圍包含元素里所有內(nèi)容
    all_range.moveToElementText(_this.get(0));
   } else {
    // 根據(jù)當(dāng)前輸入元素類型創(chuàng)建textRange
    all_range = _this.get(0).createTextRange();
   }
   // 輸入元素獲取焦點(diǎn)
   _this.focus();
   // 獲取當(dāng)前的textRange,如果當(dāng)前的textRange是一個(gè)具體位置而不是范圍,textRange的范圍從currentPos到end.此時(shí)currentPos等于end
   var cur_range = document.selection.createRange();
   // 將當(dāng)前的textRange的end向前移"選中的文本.length"個(gè)單位.保證currentPos=end
   cur_range.moveEnd('character',-cur_range.text.length)
   // 將當(dāng)前textRange的currentPos移動(dòng)到之前創(chuàng)建的textRange的currentPos處, 此時(shí)當(dāng)前textRange范圍變?yōu)檎麄€(gè)內(nèi)容的currentPos處到當(dāng)前范圍end處
   cur_range.setEndPoint("StartToStart",all_range);

   // 此時(shí)當(dāng)前textRange的Start到End的長(zhǎng)度,就是光標(biāo)的位置
   currentPos = cur_range.text.length;
   } else {
   // 文本框獲取焦點(diǎn)
   _this.focus();
   // 獲取當(dāng)前元素光標(biāo)位置
   currentPos = _this.get(0).selectionStart;
   //console.log("光標(biāo)當(dāng)前位置:"+currentPos);
   }
   // 返回光標(biāo)位置
   return currentPos;
  };

　　獲取檢索值開始位置

　　檢索開始位置，即事件觸發(fā)時(shí)光標(biāo)所在位置，直白來說，就是把事件觸發(fā)時(shí)光標(biāo)所在位置 currentPos 賦值給 oldCurrentPos 儲(chǔ)存起來，然后與新的 currentPos 組

　　成的區(qū)域（oldCurrentPos，currentPos）就是我們檢索值所在區(qū)域　

 // 獲取檢索值開始位置 oldCurrentPos
  var getOldCurrentPos = function(){
   getStart(); // 開始輸入的時(shí)候的光標(biāo)位置 currentPos
   oldCurrentPos = currentPos; // 儲(chǔ)存輸入開始位置
   console.log(oldCurrentPos);
  }

　　設(shè)置光標(biāo)位置

　　選擇當(dāng)前項(xiàng)重組輸入框 value 值后光標(biāo)是默認(rèn)顯示在最后的，這當(dāng)然不符合我們的開發(fā)需求，我們想要的效果是事件結(jié)束時(shí)光標(biāo)能在我們編輯結(jié)束的位置（關(guān)于value值重組我們?cè)谙旅娴姆椒ㄖ性倏矗?nbsp;

 // 設(shè)置光標(biāo)位置
  var setCarePosition = function(start,end) {
   if(navigator.userAgent.indexOf("MSIE") > -1){
   var all_range = '';
   if( _this.get(0).tagName == "TEXTAREA" ){ 
    // 根據(jù)body創(chuàng)建textRange
    all_range = document.body.createTextRange();
    // 讓textRange范圍包含元素里所有內(nèi)容
    all_range.moveToElementText(_this.get(0));
   } else {
    // 根據(jù)當(dāng)前輸入元素類型創(chuàng)建textRange
    all_range = _this.get(0).createTextRange();
   }
   _this.focus();
   // 將textRange的start設(shè)置為想要的start
   all_range.moveStart('character',start);
   // 將textRange的end設(shè)置為想要的end. 此時(shí)我們需要的textRange長(zhǎng)度=end-start; 所以用總長(zhǎng)度-(end-start)就是新end所在位置
   all_range.moveEnd('character',-(all_range.text.length-(end-start)));
   // 選中從start到end間的文本,若start=end,則光標(biāo)定位到start處
   all_range.select();
   }else{
   // 文本框獲取焦點(diǎn)
   _this.focus();
   // 選中從start到end間的文本,若start=end,則光標(biāo)定位到start處
   _this.get(0).setSelectionRange(start,end);
   }
  };

　　結(jié)束檢索事件

　　在結(jié)束檢索事件中我們需要初始化下拉框以及關(guān)閉開關(guān)，這里需要將該方法聲明在獲取檢索值方法前面，因?yàn)楂@取值后整個(gè)事件流程結(jié)束，我們需要初始化變量為下一次事件觸發(fā)做好準(zhǔn)備

// 結(jié)束檢索事件
  var endSearch = function(){
   _this.dropdown.find("li").remove(); // 移除下拉框中的選項(xiàng)
   _this.dropdown.hide(); // 隱藏下拉框
   searchStart = false; // 初始化檢索開關(guān) searchStart
   enterCharacter=''; // 初始化當(dāng)前字符
  }

　　獲取檢索的值

　　看下方代碼，我們能夠獲取值的前提是 searchStart 開關(guān) 打開狀態(tài)，這里我們?yōu)榱吮３植寮撵`活性，將觸發(fā)字符設(shè)置為變量，這里默認(rèn)為 $ 和 . ，enterCharacter為當(dāng)前輸入的字符，

因?yàn)楫?dāng)我們輸入 . 時(shí)，selectVal 的獲取規(guī)則會(huì)改變，所以這里我們需要將 selectVal 獲取方式區(qū)分開來，注意：這里我們要考慮到存在一個(gè)操作 -- 回刪，輸入 $,下拉框出來了，但是我

們又覺得此處 $ 出現(xiàn)得還不是時(shí)候（反正就是要?jiǎng)h），刪除 $，那么檢索事件也就結(jié)束，初始化相關(guān)變量。當(dāng)輸入的是 . 時(shí)，如果要替換值，那么我們需要的獲取從 . 在的位置往后找

　　到離 . 最近的 $ 符號(hào)，得到其在文本中的位置，這樣我們才能重組 value

 // 獲取檢索的值 selctVal
  var getSelectVal = function(){
   var val = _this.val();
   if( searchStart == true && enterCharacter != opts.levelCharacter ){ // 當(dāng)輸入的是字符 triggerCharacter 的時(shí)候 默認(rèn)為 $
   selectVal = val.substring(oldCurrentPos,currentPos); // 檢索值直接為獲取的文本區(qū)域
   }
   if( searchStart == true && enterCharacter == opts.levelCharacter ){ // 當(dāng)輸入的是字符 levelCharacter 的時(shí)候 默認(rèn)為 .
   dotVal = val.slice(0,currentPos);
   dotDollerPos = dotVal.lastIndexOf(opts.triggerCharacter)+1;
   dotSelectVal = dotVal.substring(dotDollerPos,currentPos);
   selectVal = dotSelectVal;
   console.log("到當(dāng)前下標(biāo)的字符串為："+dotVal);
   console.log("到當(dāng)前下標(biāo)最近的$下標(biāo)是："+dotDollerPos);
   console.log("輸入 . 時(shí)檢索值為："+dotSelectVal);
   }  
   console.log("獲取的值區(qū)域?yàn)椋?+oldCurrentPos+"-"+currentPos);
   if( oldCurrentPos > currentPos ){ // 回刪時(shí)清除選項(xiàng)li 隱藏下拉框
   endSearch()
   }  
  }

　　改變輸入框 value 值，定位光標(biāo)位置

　　因?yàn)槲覀冞@里存在兩種選擇方式，鼠標(biāo)點(diǎn)擊和按 enter 鍵，兩者的區(qū)別只在于執(zhí)行事件的方式，將同樣的代碼寫兩遍未免有點(diǎn)不美，這里我們將它摘出來

　　注意：此處需要區(qū)分觸發(fā)檢索事件的符號(hào)是 $ 還是 . ，因?yàn)榉?hào)不同，我們獲取的值是不同的，光標(biāo)定位也是不同

 // 選中l(wèi)i當(dāng)前項(xiàng) 改變輸入框value值 定位光標(biāo)
  var changeValue = function(){
   var val = _this.val(); 
   var liTxt = _this.dropdown.find(".active").text();
   var liTxtLength = liTxt.length;
   var valLength = val.length;
   // 此處需要區(qū)分觸發(fā)檢索事件的符號(hào)是
   if( enterCharacter == opts.levelCharacter ){ // 如果是 .
   var beforeSelectVal = val.substring(0,dotDollerPos);  
   }
   else{ // 如果是 &
   var beforeSelectVal = val.substring(0,oldCurrentPos);
   }
   var beforeSelectValLength = beforeSelectVal.length;
   var afterSelectVal = val.substring(currentPos,valLength);
   var pos = liTxtLength + beforeSelectValLength;
   val = beforeSelectVal+liTxt+afterSelectVal;
   _this.val(val);
   setCarePosition(pos,pos); // 將光標(biāo)定位在插入值后面
   endSearch();
   console.log("文本長(zhǎng)度:"+beforeSelectVal.length);
   console.log("li文本為:"+liTxt);
   console.log("前部為:"+beforeSelectVal);
   console.log("后部分為:"+afterSelectVal);
   return false; // 此處必須加上return false 不然會(huì)調(diào)用callbacktips 初始化 dropdown
  }

　　定義回調(diào)函數(shù)

　獲取檢索值之后就需要發(fā)送請(qǐng)求了，我們拿到返回的數(shù)組 arr_json 后，將其遍歷生成 li 添加到下拉框中

 // 定義回調(diào)函數(shù) callbacktips
  var callbacktips = function(arr_json){
   // 初始化 UL 
   _this.dropdown.find("li").remove();
   if( arr_json ){
   for( i=0;i<arr_json.length;i++ ){
    var n = arr_json[i].indexOf(selectVal);
    if( n != -1 ){
    _this.dropdown.append('<li>'+arr_json[i]+'</li>'); 
    }else{
    return;
    }     
   };
   }   
   _this.dropdown.show();
   _this.dropdown.find("li:first-child").addClass("active");
   // 自定義樣式
   _this.dropdown.find("li").css({ 
   'width':'100%',
   });
  };

　　獲得焦點(diǎn)時(shí)獲取光標(biāo)位置

　　這里我們直接調(diào)用上面的方法就行了　　　　　　　

　　// 獲得焦點(diǎn)的時(shí)候獲取光標(biāo)位置
  _this.click(function(){
   getOldCurrentPos()
  });

　　阻止鍵盤默認(rèn)事件

　　這里我們需要判斷下拉框的狀態(tài)：顯示還是隱藏　　　　　　　　

　//下拉框顯示時(shí) 阻止鍵盤方向鍵默認(rèn)事件
  _this.keydown(function(e){
   var dropdownIsshow = _this.dropdown.css("display");
   if( dropdownIsshow == "block" ){
   if( e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 ){
    e.preventDefault();
   }
   }
  })

　　keyup 事件

　　通過keyuo事件：”我們能實(shí)時(shí)監(jiān)聽輸入框；也能通過按鍵切換當(dāng)前項(xiàng)以及改變光標(biāo)位置；也能限制輸入字符范圍，比如這里：當(dāng)輸入某些字符時(shí)，將會(huì)被認(rèn)為輸入了不合法字符而終止檢索事件；

　　我們的事件開關(guān)也是通過該事件能改變其狀態(tài)的以及 enter 鍵選取當(dāng)前項(xiàng)　　　　　　　　　　

// 監(jiān)聽輸入框value值變化
  _this.keyup(function(e){
   var val = _this.val(); 
   // 當(dāng)前項(xiàng)索引
   var n = _this.dropdown.find(".active").index();
   // li 個(gè)數(shù)
   var n_max = _this.dropdown.find("li").length;  
   getStart(); // 獲得最新光標(biāo)位置
   // 方向鍵控制 li 選項(xiàng)
   if( e.keyCode == 38 ){   
   if(n-1>=0){
    _this.dropdown.find('li').eq(n-1).addClass("active").siblings().removeClass("active");
   }
   if( n == 0){
    _this.dropdown.find('li').eq(n_max-1).addClass("active").siblings().removeClass("active");
   }
   return false; // 此處必須加上return false 不然會(huì)重復(fù)初始化
   }  
   if( e.keyCode == 40 ){
   if(n<n_max-1){
    _this.dropdown.find('li').eq(n+1).addClass("active").siblings().removeClass("active"); 
   }
   if( n+1 == n_max ){
    _this.dropdown.find('li').eq(0).addClass("active").siblings().removeClass("active");
   }
   return false; // 此處必須加上return false 不然會(huì)重復(fù)初始化
   } 
   if( e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 ){
   var reg = new RegExp("[`~!@#^&*()=|{}':;',\\[\\]<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
   enterCharacter = val.substring(currentPos-1,currentPos); // 當(dāng)前輸入的字符
   //console.log(enterCharacter);
   if( reg.test(enterCharacter) == false && enterCharacter != " "){ // 輸入的字符合法 可以執(zhí)行檢索事件
    //console.log("輸入字符合法");
    checkCharacter = true;
   }else{
    checkCharacter = false;
    endSearch()
    console.log("輸入了不合法字符");
    //console.log(selectVal);   
   }   
   }   
   console.log("當(dāng)前輸入的字符是:"+enterCharacter);
   if( enterCharacter == opts.triggerCharacter || enterCharacter == opts.levelCharacter){
   console.log("輸入了$或者.");
   // 輸入了 $,打開開關(guān)，允許檢索事件執(zhí)行
   searchStart = true;
   getOldCurrentPos(); // 輸入 $ 的時(shí)候重置 oldCurrentPos
   }
   getSelectVal(); // 外度調(diào)用獲取檢索值方法 保證實(shí)時(shí)更新 selectVal 及 searchStart
   if( searchStart == true && checkCharacter == true && e.keyCode != 13 ){
   console.log("獲取的值:"+selectVal);
   if( $.isFunction(opts.keyPressAction) ){   
    opts.keyPressAction(selectVal, function(arr_json){
    // 調(diào)用回調(diào)函數(shù)
    callbacktips(arr_json);   
    });
   }
   }
   if( e.keyCode == 13 ){ // 按enter鍵選取當(dāng)前l(fā)i文本值 重組輸入框 value值
   var dropdownIsshow = _this.dropdown.css("display");
   if( dropdownIsshow == "block" ){ // 為了在下拉框隱藏時(shí)按 enter鍵 能換行，需要加上這個(gè)判斷
    changeValue();
    console.log("這是點(diǎn)擊enter后searchStart："+searchStart);
   }
   }
   console.log("這是整個(gè)事件執(zhí)行完成以后："+searchStart);
  });

　　鼠標(biāo)滑入切換當(dāng)前項(xiàng)　　　　　　　　　

　// 切換當(dāng)前項(xiàng)
  _this.dropdown.on('mouseenter','li',function(){
   $(this).addClass("active").siblings().removeClass("active");
  });

　　點(diǎn)擊選取當(dāng)前項(xiàng) 失去焦點(diǎn)事件

　　這里采用了 event.target 方法來獲得事件源，如果是下拉框中的 li ，則執(zhí)行 changeValue() 方法,否則結(jié)束檢索事件 endSearch()　　　　　　　　　

 // 點(diǎn)擊當(dāng)前項(xiàng)獲取文本值 重組輸入框 value值 失去焦點(diǎn)時(shí)隱藏下拉框 清空下拉框
  $(document).click(function(e){
   var e = event || window.event;
   var el = e.target.localName; // 獲取事件源 標(biāo)簽名
   el == "li" ? changeValue() : endSearch();
   //console.log(el);
  })

js代碼 -- 動(dòng)態(tài)獲取光標(biāo)位置

　　這個(gè)方法是借鑒一位前輩的，這里附上原文地址（前輩大善）：http://blog.csdn.net/kingwolfofsky/article/details/6586029

/*********以下為獲取下拉框像素坐標(biāo)方法*********/ 
  var kingwolfofsky = { 
   getInputPositon: function (elem) { 
   if (document.selection) { //IE Support 
    elem.focus(); 
    var Sel = document.selection.createRange(); 
    return { 
    left: Sel.boundingLeft, 
    top: Sel.boundingTop, 
    bottom: Sel.boundingTop + Sel.boundingHeight 
    }; 
   } else { 
    var that = this; 
    var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}'; 
    var none = '<span style="white-space:pre-wrap;"> </span>'; 
    var div = elem[cloneDiv] || document.createElement('div'), focus = elem[cloneFocus] || document.createElement('span'); 
    var text = elem[cloneLeft] || document.createElement('span'); 
    var offset = that._offset(elem), index = this._getFocus(elem), focusOffset = { left: 0, top: 0 }; 
   
    if (!elem[cloneDiv]) { 
    elem[cloneDiv] = div, elem[cloneFocus] = focus; 
    elem[cloneLeft] = text; 
    div.appendChild(text); 
    div.appendChild(focus); 
    document.body.appendChild(div); 
    focus.innerHTML = '|'; 
    focus.style.cssText = 'display:inline-block;width:0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;'; 
    div.className = this._cloneStyle(elem); 
    div.style.cssText = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;'; 
    }; 
    div.style.left = this._offset(elem).left + "px"; 
    div.style.top = this._offset(elem).top + "px"; 
    var strTmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>').replace(/\s/g, none); 
    text.innerHTML = strTmp; 
   
    focus.style.display = 'inline-block'; 
    try { focusOffset = this._offset(focus); } catch (e) { }; 
    focus.style.display = 'none'; 
    return { 
    left: focusOffset.left, 
    top: focusOffset.top, 
    bottom: focusOffset.bottom 
    }; 
   } 
   },
   // 克隆元素樣式并返回類 
   _cloneStyle: function (elem, cache) { 
   if (!cache && elem['${cloneName}']) return elem['${cloneName}']; 
   var className, name, rstyle = /^(number|string)$/; 
   var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8:outline && outlineWidth 
   var cssText = [], sStyle = elem.style; 
   
   for (name in sStyle) { 
    if (!rname.test(name)) { 
    val = this._getStyle(elem, name); 
    if (val !== '' && rstyle.test(typeof val)) { // Firefox 4 
     name = name.replace(/([A-Z])/g, "-$1").toLowerCase(); 
     cssText.push(name); 
     cssText.push(':'); 
     cssText.push(val); 
     cssText.push(';'); 
    }; 
    }; 
   }; 
   cssText = cssText.join(''); 
   elem['${cloneName}'] = className = 'clone' + (new Date).getTime(); 
   this._addHeadStyle('.' + className + '{' + cssText + '}'); 
   return className; 
   }, 
   
   // 向頁頭插入樣式 
   _addHeadStyle: function (content) { 
   var style = this._style[document]; 
   if (!style) { 
    style = this._style[document] = document.createElement('style'); 
    document.getElementsByTagName('head')[0].appendChild(style); 
   }; 
   style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content)); 
   }, 
   _style: {}, 
   
   // 獲取最終樣式 
   _getStyle: 'getComputedStyle' in window ? function (elem, name) { 
   return getComputedStyle(elem, null)[name]; 
   } : function (elem, name) { 
   return elem.currentStyle[name]; 
   }, 
   // 獲取光標(biāo)在文本框的位置 
   _getFocus: function (elem) { 
   var index = 0; 
   if (document.selection) {// IE Support 
    elem.focus(); 
    var Sel = document.selection.createRange(); 
    if (elem.nodeName === 'TEXTAREA') {//textarea 
    var Sel2 = Sel.duplicate(); 
    Sel2.moveToElementText(elem); 
    var index = -1; 
    while (Sel2.inRange(Sel)) { 
     Sel2.moveStart('character'); 
     index++; 
    }; 
    } 
    else if (elem.nodeName === 'INPUT') {// input 
    Sel.moveStart('character', -elem.value.length); 
    index = Sel.text.length; 
    } 
   } 
   else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support 
    index = elem.selectionStart; 
   } 
   return (index); 
   }, 
   
   // 獲取元素在頁面中位置 
   _offset: function (elem) { 
   var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement; 
   var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0; 
   var top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop, left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft; 
   return { 
    left: left, 
    top: top, 
    right: left + box.width, 
    bottom: top + box.height 
   }; 
   } 
  };

　　調(diào)用獲取坐標(biāo)方法　　　　　　　　

　 // 調(diào)用獲取坐標(biāo)方法 show(elem)
  $(this).keyup(function(){
   show(this);
  });  
  // 調(diào)用 kingwolfofsky， 獲取光標(biāo)坐標(biāo)
  function show(elem) { 
   var p = kingwolfofsky.getInputPositon(elem); 
   var s = _this.dropdown.get(0); 
   var ttop = parseInt(_this.css("marginTop"));
   var tleft = parseInt(_this.css("marginLeft"));
   s.style.top = p.bottom-ttop+10+'px'; 
   s.style.left = p.left-tleft + 'px';   
  }

js代碼 -- 設(shè)置默認(rèn)參數(shù)

var defaults = { 
 triggerCharacter : '$', // 默認(rèn)觸發(fā)事件 字符
 levelCharacter: '.', // 默認(rèn)多層檢索觸發(fā)字符
 dropdownWidth:'150px' // 下拉框默認(rèn)寬度
 };

js代碼 -- 插件調(diào)用

　　此處只為展示效果在 keyPressAction 中能自定義匹配規(guī)則進(jìn)行拓展　　　

　$("#test").editTips({
  triggerCharacter : '$',
  levelCharacter: '.',
  dropdownWidth:'150px', 
  keyPressAction:function(selectVal,callbacktips){
  var arr_json;
  if( selectVal == "" ){
   arr_json = ["a","ab","b","bb"]
  }
  if(selectVal && selectVal.indexOf("a")== 0){
   arr_json = ["a","ab"];
  }
  if(selectVal && selectVal.indexOf("b")== 0){
   arr_json = ["b","bb"];
  }
  if(selectVal && selectVal.indexOf("a.")== 0){
   arr_json = ["a.a","a.b","a.c"];
  }
  if(selectVal && selectVal.indexOf("b.")== 0){
   arr_json = ["b.a","b.b","b.c"];
  }
  if(selectVal && selectVal.indexOf("ab.")== 0){
   arr_json = ["ab.a","ab.b","ab.c"];
  }
  if(selectVal && selectVal.indexOf("bb.")== 0){
   arr_json = ["bb.a","bb.b","bb.c"];
  }
  callbacktips(arr_json);
  }  
 });

由于代碼比較多，這里就不展示所有代碼了，最終效果圖：

在此附上demo下載鏈接：

不管你信不信，我已經(jīng)設(shè)置了下載口令，親們必須在心里說出我的一個(gè)優(yōu)點(diǎn)才能點(diǎn)擊下載~

下載demo

總結(jié)

以上所述是小編給大家介紹的js 公式編輯器 - 自定義匹配規(guī)則 - 帶提示下拉框 - 動(dòng)態(tài)獲取光標(biāo)像素坐標(biāo)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: