javascript自动填充插件【续1】

接上回,这次只贴用到的工具函数代码。

//********cursorX*********
//获取或者设置光标位置 测试地址 http://jsbin.com/ibiwa6
//pos参数  integer 光标位置 
//传入此参数将光标置于pos位置
//不设置次参数将返回光标位置
function cursorX(textareaID,pos){
  var iCursorX = 0;
  var obj = document.getElementById(textareaID);
  if(document.selection){//IE
    var rng = document.selection.createRange();
    if(pos === undefined){//get
      obj.focus();
      if(rng === null){
        iCursorX  = 0;
      }

      var re = obj.createTextRange(),
        rc = re.duplicate();
      re.moveToBookmark(rng.getBookmark());
      rc.setEndPoint('EndToStart',re);
      iCursorX  = rc.text.length;
    }else if(typeof pos === "number"){//set
      obj.focus();
      var range = obj.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }else{//other browser
    if(pos === undefined){//set
      iCursorX  = obj.selectionStart;
    }else if(typeof pos === "number"){// get
      //curScrollTop saved by other function,default:0
      //obj.scrollTop = this.curScrollTop;
      obj.focus();
      obj.selectionEnd = pos;
      obj.selectionStart = pos;
    }
  }
  return iCursorX;
}
//**********escapeReg**********
//字符串拼成regex对象的前过滤
//(不是原创)
function escapeReg(a){
  for(var b = [], c = 0; c < a.length; c ++ )
    {
       var e = a.charAt(c);
       switch(e)
       {
          case "." :
             b.push("\\x2E");
             break;
          case "$" :
             b.push("\\x24");
             break;
          case "^" :
             b.push("\\x5E");
             break;
          case "{" :
             b.push("\\x7B");
             break;
          case "[" :
             b.push("\\x5B");
             break;
          case "(" :
             b.push("\\x28");
             break;
          case "|" :
             b.push("\\x28");
             break;
          case ")" :
             b.push("\\x29");
             break;
          case "*" :
             b.push("\\x2A");
             break;
          case "+" :
             b.push("\\x2B");
             break;
          case "?" :
             b.push("\\x3F");
             break;
          case "\\" :
             b.push("\\x5C");
             break;
          case "/" :
              b.push("\\x2F");
              break;
          default :
           b.push(e);
          }
       }
    return b.join("");
};
//**********stopDefault**********
//阻止事件的默认行为
function stopDefault(e){
     if ( e && e.preventDefault )
        e.preventDefault();
    else
        window.event.returnValue = false;

    return false;
};

还有其它用到的函数,不值得重用,没有单独分出来。在这里做简单的解释,明白思路即可。

待续……【todo:贴出完整代码,及测试程序】

javascript自动填充插件

自己写的一个插件,效果见下图

效果图

特点是多行文本中可以正确定位,可以同时检索不同的格式。就跟腾讯微博的效果差不多,不过他们的js压缩了,没看出来是不是用同样的方法定位的。
因为是第一次做这种插件,很多问题都是第一次遇到,在这里总结一下,一些工具函数也单独写出来给大家做个参考。

界面需要一个textarea输入框,隐藏的shadow层,选择面板。

工作流程【todo:流程图】

结构图:

  1. 绑定事件
    绑定onkeydown事件:如果选择面板正在显示,屏蔽up,down,enter,tab键的默认行为。
    绑定onkeyup事件:
    1.1,如果选择面板显示,UP选中条目上移,DOWN选中条目下移,RETURN,TAB插入结果及后续处理(关闭选择面板等【hide()】)其它键触发主逻辑;
    1.2,如果选择面板没有显示,所有按键触发主逻辑【暂时命名search】。
  2. search功能
    2.1、如果文本框内有@符号:获取待选姓名列表,获取光标在行中位置,获得@后面的字符,显示选择面板【暂定名showSelecterLayer】。
    2.2、如果文本框内没有@符号,或者有@符号但是后面没有符合规则的字符,关闭选择面板及其他清理工作。【hide()】
  3. showSelecterLayer 功能
    3.1、填充内容到shadow层
    3.2、获取光标x,y坐标
    3.3、
    3.3.1,如果有备选项:显示选择面板(显示备选结果,默认选中第一个,绑定事件);
    3.3.2,如果备选项没有加载成功或者不存在:关闭选择面板并进行清理【hide()】

工具函数

  1. cursorX(pos):【暂定:setCursorX】获取或设置光标在文本框行中的位置。
  2. fetchNameList:获取备选项数据,如果本地不存在异步请求获取。
  3. fillShadow:把当前获取的姓名用<span>标签包裹,然后把文本框中的内容赋值给隐藏的shadow层。
  4. resultPosition:【暂定:setResultPosition】根据shadow层中span的位置计算出选择面板出现的位置。
  5. resultStr:【暂定:setResultStr】从Name List搜索符合用户输入的名字,组合成ul li <b>输入的字符</b> 的格式,设置选择默认结果为第一个选项。
  6. bindHover:绑定选择面板的鼠标经过事件,鼠标点击事件。
  7. escapeReg:setResultStr 用到的工具函数,用户的输入拼成正则表达式之前处理特殊字符。
  8. hide:关闭选择面板。
  9. stopDefault:阻止事件的默认行为。

待续……【todo 抄代码,找个代码高亮插件】

加油

document.write('找到了,这么快!')

 

2011除草

几个月没管博客,都要长草了,从今天开始,博客又复活了。
这几天整理一下要写的内容,把最近一年的学习总结发上来。
关于js和jquery的学习总结,自动完成插件,选择插件。
加油