JS实现动态提示框
引言
什么项目都有个需求，应开发需求，需要写一个公式编辑器选择公式的插件，下面给大家讲一下实现过程。（擦汗，强作淡定，咳，开嗓~）
看图说话
本小菜开发功能前乐于先写个需求思维导图（纯属个人爱好）：
Html
真的只有一点点~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公式编辑器测试</title>
<link rel="stylesheet" type="text/css" href="./css/global.css">
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/editTips.js"></script>
</head>
<body>
<textarea id="test" ></textarea>
</body>
</html>
css
一起给了吧~迟早要给：
/* 编辑器下拉框相关样式 */ table,tr,th,td{padding:0;margin:0;} ul,li,textarea,input{text-decoration:none;list-style:none;margin:0;padding:0;box-sizing: border-box;} input{ outline:none; } .editTips{ padding:5px 0; border-radius: 0!important; box-shadow: 0 2px 4px rgba(0,0,0,.2); max-height: auto; margin:0; z-index:9999; } .editTips li{ text-align:left; box-sizing:border-box; display:block; width:100%; line-height:1.42857143; margin:1px 0; padding:6px 11px; color:#333; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; line-height:1.42857143; border-bottom:solid 1px #e5e5e5; background:#e5e5e5; } .editTips li:last-child{ border-bottom:none; } .active{ background:#fee188!important; } .editTips li.active{ background:#fee188!important; } textarea{ text-decoration: none; list-style: none; margin: 0; padding: 0; display: block; box-sizing: border-box; width: 500px; height: 300px; margin-top: 100px; margin-left: 100px; }
插件模板 - this 为输入框
(function ($) { $.fn.extend({ "editTips": function (options) { var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象 }); } }); //默认参数 var defaults = { }; })(window.jQuery);
插入下拉框
这里 this 为输入框，在 html 中，不需要再去js插入，当然这不是问题，在这里我们将 输入框和下拉框都自定义一下，插入的 ul 中 editTips 类可以去掉，为了方便看效果暂时加上
我个人肯定是希望下拉框宽度是可以自定义的： 'width':opts.dropdownWidth, 这里我们定义了第一个参数： 下拉框宽度
1 var _this = this; 2 _this.entertext = $(this); 3 _this.dropdown = $('<ul class="editTips" style="display:none;"></ul>'); 5 $("body").after(_this.dropdown); 6 _this.dropdown.css({ 7 'width':opts.dropdownWidth, 8 'position':'absolute', 9 });
监听文本框
ps：既然是公式编辑器，那说明不会一直触发检索事件，只有在输入了指定字符的时候才会触发检索事件，比如：! @ # 之类，这里我们以 $ 为例，从这里我们可以想到，我们肯定
需要一个参数来动态改变检索事件触发条件，先记在心里
检索流程： 输入框输入值 - 输入特定字符触发检索，如 $ - 是否符合放松请求条件：输入间隔一秒 - 调用回调函数，我们这里为 callbacktips 匹配关键字 - 返回包含关键字部分匹配结果，以数组形式 - 遍历数组添加到下拉框 ul 中显示 - 选取当前项
其中数组相关方法运用得较多
因为其中还涉及到限制请求，方向键切换当前项，这里就不分开说了，直接给出整块代码如下：
// 监听输入框 _this.dropdown.parent().on("keyup",this,function(event){ var nowTime = window.sessionStorage.getItem('nowTime'); // 当前项索引 var n = _this.dropdown.find(".active").index(); // li 个数 var n_max = _this.dropdown.find("li").length; // 注意 event在 firefox 中不能兼容，在方法中带上event参数，如下声明实现兼容 EVT = event || window.event; if( EVT.keyCode == 38 ){ // 方向键控制 li 选项 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; } // 禁止enter键换行 if( EVT.keyCode == 13 ){ return false; } if( EVT.keyCode == 40 ){ // 方向键控制 li 选项 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; } // 限制请求，输入间隔不超过一秒时不触发检索事件发送请求 if( nowTime){ var oldTime = Date.now(); var nowTime = window.sessionStorage.getItem('nowTime'); var m = parseInt((oldTime - nowTime)/1000); if( m >= 1){ // 文本内容 var val = _this.entertext.val(); // 以空格切割文本返回数组 var arr_test = val.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1]; // 切割最后一个元素 单字符元素 返回数组 var temp_type = temp.split(""); // 获取数字第一个字符 var temp_cha = temp_type[0]; // 最后一个元素长度 var temp_len = temp.length; var temp_dot = temp_type.lastIndexOf("."); // 定义回调函数 callbacktips var callbacktips = function(arr_json){ // 初始化 UL _this.dropdown.find("li").remove(); for( i=0;i<arr_json.length;i++ ){ _this.dropdown.append('<li>'+arr_json[i]+'</li>'); }; _this.dropdown.show(); _this.dropdown.find("li:first-child").addClass("active"); // 自定义样式 _this.dropdown.find("li").css({ 'width':'100%', }); }; // 最后一个元素为空值 if( temp_len == 0 ){ _this.dropdown.hide(); _this.dropdown.find('li').remove(); } // 为特定字符 符合触发条件 if( temp_cha == opts.triggerCharacter ){ if($.isFunction(opts.keyPressAction)){ opts.keyPressAction(temp, function(arr_json){ // 调用回调函数 callbacktips(arr_json); }); } }else{ _this.dropdown.hide(); _this.dropdown.find('li').remove(); } } } // 初始化第一次时间 window.sessionStorage.setItem('nowTime',Date.now()); });
ps:这里出现了我们第二个参数，也是至关重要的一个参数，触发检索事件字符: opts.triggerCharacter
鼠标切换当前项
下拉菜单显示之后（这里我们先不管下拉菜单显示的位置），从体验上来说我希望既可以用鼠标选取，也可以用方向键选取，方向键切换当前项整合在上面的代码中，这里鼠标切换当前项：
// 切换当前项 _this.dropdown.on('mouseenter','li',function(){ $(this).addClass("active").siblings().removeClass("active"); });
阻止键盘按键默认事件 - enter键选取当前项
如果不做处理，我们在用方向键切换当前项的时候，你会看到光标也在上下移动，这如何能忍？怎么办？屏蔽它~，在这里我们可以整合enter键选取当前项，看代码：
// 阻止输入过程中 方向键盘的默认事件 _this.entertext.on("keydown",_this.entertext,function(event){ EVT = event || window.event; if( EVT.keyCode == 38 ){ EVT.preventDefault(); } if( EVT.keyCode == 40 ){ EVT.preventDefault(); } // enter键选取对应的 li if( EVT.keyCode == 13 ){ EVT.preventDefault(); var txt = _this.dropdown.find(".active").html(); var test_txt = _this.entertext.val(); var arr_change = test_txt.split(" "); // 以空格切割文本返回数组 var arr_test = test_txt.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1]; var temp_type = temp.split(""); var temp_dot = temp_type.lastIndexOf("."); var n ; temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt); n = temp_type.join(''); arr_change.splice(arr_change.length-1,1,""+n); _this.entertext.val(arr_change.join(" ")); _this.dropdown.hide(); _this.dropdown.find('li').remove(); } });
点击当前项 重组val
要不我们直接看代码吧，你可能已经饿了~好的。看代码：
// 点击替换 重组val $(document).on("click",'li',function(){ var txt = $(this).html(); var test_txt = _this.entertext.val(); var arr_change = test_txt.split(" "); // 以空格切割文本返回数组 var arr_test = test_txt.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1];y var temp_type = temp.split(""); var temp_dot = temp_type.lastIndexOf("."); var n ; temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt); n = temp_type.join(''); arr_change.splice(arr_change.length-1,1,""+n); _this.entertext.val(arr_change.join(" ")); _this.dropdown.hide(); _this.dropdown.find('li').remove(); });
默认参数
到了这里抛开动态显示下拉框位置，我们的公式编辑器应该可以跑一跑了，这里我们给参数设置一下默认值：
//默认参数 var defaults = { triggerCharacter : '$', dropdownWidth:'150px' };
这里我们将特定字符设定为 $,下拉框默认默认宽度为150px，当然其中还有一些配角参数，不屑一提，看官们有兴趣也可以自行添加一些参数
测试之后发现是可以正常使用的，那么接下来就是下拉框显示位置的问题了，这个想象好像不是秒秒钟能解决的问题，怎么办?(吐槽：什么怎么办？问百度啊~不要问我搜不到怎么办，因为我也不知道~)
这种时候不得不安慰自己：身为菜鸟还是有好处的，毕竟有无数前辈在前进的道路上闪闪发光~
搜~
掌声，在这里附上获取光标像素左边的原文链接以示感谢：http://blog.csdn.net/kingwolfofsky/article/details/6586029
剩下的就是整合啦，当然对于整合过程中遇到的一点小问题不必讶异（都坐下，基本操作）：
1，测试之后发现下拉框位置是动态出现了，可位置不对，偏移心里的理想位置有八百里。没办法，再去安静的阅读一下前辈的代码，看完代码，发现上文中 下拉框的位置是绝对定位的坐标，这意味着什么
呢？（我承认是后来才发现的~不测试不知道），这意味着下拉框的显示位置不是相对于输入框，而是相对于整个body，所以我们应该把下拉框插入在body里面：
$("body").after(_this.dropdown);
2，再测：发现位置大体上是对了，但还是有偏移，再测测测~原来下拉框显示位置还受输入框 margin-left 和 margin-top 的影响,测试得出以下代码：
// 调用 kingwolfofsky， 获取光标坐标 function show(elem) { var p = kingwolfofsky.getInputPositon(elem); var s = _this.dropdown.get(0); var ttop = parseInt(_this.entertext.css("marginTop")); var tleft = parseInt(_this.entertext.css("marginLeft")) console.log(ttop); s.style.top = p.bottom-ttop+10+'px'; s.style.left = p.left-tleft + 'px'; }
现在我们需要一次完整的测试，调用：
$("#test").editTips({
triggerCharacter : '$',
dropdownWidth:'150px',
keyPressAction:function(temp,callbacktips){
var arr_json;
if( temp == "$" ){
arr_json = ["$a","$ab","$b","$bb"]
}
if(temp && temp.indexOf("$a")== 0){
arr_json = ["$a","$ab"];
}
else if(temp && temp.indexOf("$b")== 0){
arr_json = ["$b","$bb"];
}
callbacktips(arr_json);
}
});
当然我们这里只是模拟返回数组，如果公式库不是很大，可以在前端完成，比如说自己建一个 json文件啥的~测试结果如图：
全部 js 代码
效果很ok，那么接下来呢？看官息怒，我知道到了该出全部代码的时候到了：
/* *****公式编辑器***** * 调用 editTips()方法 * editTips({ * triggerCharacter: 触发匹配字符 默认为 "$" * textareaWidth: 输入框宽度 默认 auto * textareaHeight: 输入框高度 默认 auto * dropdownWidth: 下拉提示框宽度 默认150px * keyPressAction:function(temp,callbacktips){ * // 参数为temp 返回 arr_json 数组 调用回调函数 callbacktips(arr_json) * var arr_json; * callbacktips(arr_json); * } * }); * */ (function ($) { $.fn.extend({ "editTips": function (options) { var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象 // 获取输入光标在页面中的坐标 返回left和top,bottom 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]; }, // 获取光标在文本框的位置 _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 }; } }; // 文本框监听事件 var _this = this; _this.entertext = $(this); _this.dropdown = $('<ul class="editTips" style="display:none;"></ul>'); // 获取到的弹出的下拉框的位置是绝对定位的坐标，所以得把弹出的层放到body里 $("body").after(_this.dropdown); _this.dropdown.css({ 'width':opts.dropdownWidth, 'position':'absolute', }); $(this).css({ 'position': 'relative', }); // 监听输入框 _this.dropdown.parent().on("keyup",this,function(event){ var nowTime = window.sessionStorage.getItem('nowTime'); // 当前项索引 var n = _this.dropdown.find(".active").index(); // li 个数 var n_max = _this.dropdown.find("li").length; // 注意 event在 firefox 中不能兼容，在方法中带上event参数，如下声明实现兼容 EVT = event || window.event; if( EVT.keyCode == 38 ){ // 方向键控制 li 选项 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; } // 禁止enter键换行 if( EVT.keyCode == 13 ){ return false; } if( EVT.keyCode == 40 ){ // 方向键控制 li 选项 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; } // 限制请求，输入间隔不超过一秒时不触发检索事件发送请求 if( nowTime){ var oldTime = Date.now(); var nowTime = window.sessionStorage.getItem('nowTime'); var m = parseInt((oldTime - nowTime)/1000); if( m >= 1){ // 文本内容 var val = _this.entertext.val(); // 以空格切割文本返回数组 var arr_test = val.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1]; // 切割最后一个元素 单字符元素 返回数组 var temp_type = temp.split(""); // 获取数字第一个字符 var temp_cha = temp_type[0]; // 最后一个元素长度 var temp_len = temp.length; var temp_dot = temp_type.lastIndexOf("."); // 定义回调函数 callbacktips var callbacktips = function(arr_json){ // 初始化 UL _this.dropdown.find("li").remove(); for( i=0;i<arr_json.length;i++ ){ _this.dropdown.append('<li>'+arr_json[i]+'</li>'); }; _this.dropdown.show(); _this.dropdown.find("li:first-child").addClass("active"); // 自定义样式 _this.dropdown.find("li").css({ 'width':'100%', }); }; // 最后一个元素为空值 if( temp_len == 0 ){ _this.dropdown.hide(); _this.dropdown.find('li').remove(); } // 为特定字符 符合触发条件 if( temp_cha == opts.triggerCharacter ){ if($.isFunction(opts.keyPressAction)){ opts.keyPressAction(temp, function(arr_json){ // 调用回调函数 callbacktips(arr_json); }); } }else{ _this.dropdown.hide(); _this.dropdown.find('li').remove(); } } } // 初始化第一次时间 window.sessionStorage.setItem('nowTime',Date.now()); }); // 切换当前项 _this.dropdown.on('mouseenter','li',function(){ $(this).addClass("active").siblings().removeClass("active"); }); // 阻止输入过程中 方向键盘的默认事件 _this.entertext.on("keydown",_this.entertext,function(event){ EVT = event || window.event; if( EVT.keyCode == 38 ){ EVT.preventDefault(); } if( EVT.keyCode == 40 ){ EVT.preventDefault(); } // enter键选取对应的 li if( EVT.keyCode == 13 ){ EVT.preventDefault(); var txt = _this.dropdown.find(".active").html(); var test_txt = _this.entertext.val(); var arr_change = test_txt.split(" "); // 以空格切割文本返回数组 var arr_test = test_txt.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1]; var temp_type = temp.split(""); var temp_dot = temp_type.lastIndexOf("."); var n ; temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt); n = temp_type.join(''); arr_change.splice(arr_change.length-1,1,""+n); _this.entertext.val(arr_change.join(" ")); _this.dropdown.hide(); _this.dropdown.find('li').remove(); } }); // 点击替换 重组val $(document).on("click",'li',function(){ var txt = $(this).html(); var test_txt = _this.entertext.val(); var arr_change = test_txt.split(" "); // 以空格切割文本返回数组 var arr_test = test_txt.split(" "); // 获取数组最后一个元素 var temp = arr_test[arr_test.length-1]; var temp_type = temp.split(""); var temp_dot = temp_type.lastIndexOf("."); var n ; temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt); n = temp_type.join(''); arr_change.splice(arr_change.length-1,1,""+n); _this.entertext.val(arr_change.join(" ")); _this.dropdown.hide(); _this.dropdown.find('li').remove(); }); // 调用获取坐标方法 show(elem) $(this).keyup(function(){ show(this); }); // 调用 kingwolfofsky， 获取光标坐标 function show(elem) { var p = kingwolfofsky.getInputPositon(elem); var s = _this.dropdown.get(0); var ttop = parseInt(_this.entertext.css("marginTop")); var tleft = parseInt(_this.entertext.css("marginLeft")) console.log(ttop); s.style.top = p.bottom-ttop+10+'px'; s.style.left = p.left-tleft + 'px'; } }); } }); //默认参数 var defaults = { triggerCharacter : '$', dropdownWidth:'150px' }; })(window.jQuery);
调用插件
对呀，还是上面的调用，没问题的吧~
$("#test").editTips({
triggerCharacter : '$',
dropdownWidth:'150px',
keyPressAction:function(temp,callbacktips){
var arr_json;
if( temp == "$" ){
arr_json = ["$a","$ab","$b","$bb"]
}
if(temp && temp.indexOf("$a")== 0){
arr_json = ["$a","$ab"];
}
else if(temp && temp.indexOf("$b")== 0){
arr_json = ["$b","$bb"];
}
callbacktips(arr_json);
}
});
最后，复制粘贴上面的 html ，css ，js ，调用，它就是你的了~
这次分享就到这里了，欢迎亲们品鉴，有问题可以私信或者留言哦~（偷笑：虽然我不一定看~看了不一定回~回了不一定能解决问题~）
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公式测试</title>
<style>
/* 编辑器下拉框相关样式 */
table,tr,th,td{padding:0;margin:0;}
ul,li,textarea,input{text-decoration:none;list-style:none;margin:0;padding:0;box-sizing: border-box;}
input{
outline:none;
}
.editTips{
padding:5px 0;
border-radius: 0!important;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
max-height: auto;
margin:0;
z-index:9999;
}
.editTips li{
text-align:left;
box-sizing:border-box;
display:block;
width:100%;
line-height:1.42857143;
margin:1px 0;
padding:6px 11px;
color:#333;
cursor:pointer;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:400;
line-height:1.42857143;
border-bottom:solid 1px #e5e5e5;
background:#e5e5e5;
}
.editTips li:last-child{
border-bottom:none;
}
.active{
background:#fee188!important;
}
.editTips li.active{ background:#fee188!important; }
textarea{
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
display: block;
box-sizing: border-box;
width: 500px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<textarea id="test" ></textarea>
</body>
</html>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*
*****公式编辑器*****
* 调用 editTips()方法
* editTips({
* triggerCharacter: 触发匹配字符 默认为 "$"
* textareaWidth: 输入框宽度 默认 auto
* textareaHeight: 输入框高度 默认 auto
* dropdownWidth: 下拉提示框宽度 默认150px
* keyPressAction:function(temp,callbacktips){
* // 参数为temp 返回 arr_json 数组 调用回调函数 callbacktips(arr_json)
* var arr_json;
* callbacktips(arr_json);
* }
* });
*
*/
(function ($) {
$.fn.extend({
"editTips": function (options) {
var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象
// 获取输入光标在页面中的坐标 返回left和top,bottom
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];
},
// 获取光标在文本框的位置
_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
};
}
};
// 文本框监听事件
var _this = this;
_this.entertext = $(this);
_this.dropdown = $('<ul class="editTips" style="display:none;"></ul>');
// 获取到的弹出的下拉框的位置是绝对定位的坐标，所以得把弹出的层放到body里
$("body").after(_this.dropdown);
_this.dropdown.css({
'width':opts.dropdownWidth,
'position':'absolute',
});
$(this).css({
'position': 'relative',
});
// 监听输入框
_this.dropdown.parent().on("keyup",this,function(event){
var nowTime = window.sessionStorage.getItem('nowTime');
// 当前项索引
var n = _this.dropdown.find(".active").index();
// li 个数
var n_max = _this.dropdown.find("li").length;
// 注意 event在 firefox 中不能兼容，在方法中带上event参数，如下声明实现兼容
EVT = event || window.event;
if( EVT.keyCode == 38 ){
// 方向键控制 li 选项
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;
}
// 禁止enter键换行
if( EVT.keyCode == 13 ){
return false;
}
if( EVT.keyCode == 40 ){
// 方向键控制 li 选项
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;
}
// 限制请求，输入间隔不超过一秒时不触发检索事件发送请求
if( nowTime){
var oldTime = Date.now();
var nowTime = window.sessionStorage.getItem('nowTime');
var m = parseInt((oldTime - nowTime)/1000);
if( m >= 1){
// 文本内容
var val = _this.entertext.val();
// 以空格切割文本返回数组
var arr_test = val.split(" ");
// 获取数组最后一个元素
var temp = arr_test[arr_test.length-1];
// 切割最后一个元素 单字符元素 返回数组
var temp_type = temp.split("");
// 获取数字第一个字符
var temp_cha = temp_type[0];
// 最后一个元素长度
var temp_len = temp.length;
var temp_dot = temp_type.lastIndexOf(".");
// 定义回调函数 callbacktips
var callbacktips = function(arr_json){
// 初始化 UL
_this.dropdown.find("li").remove();
for( i=0;i<arr_json.length;i++ ){
_this.dropdown.append('<li>'+arr_json[i]+'</li>');
};
_this.dropdown.show();
_this.dropdown.find("li:first-child").addClass("active");
// 自定义样式
_this.dropdown.find("li").css({
'width':'100%',
});
};
// 最后一个元素为空值
if( temp_len == 0 ){
_this.dropdown.hide();
_this.dropdown.find('li').remove();
}
// 为特定字符 符合触发条件
if( temp_cha == opts.triggerCharacter ){
if($.isFunction(opts.keyPressAction)){
opts.keyPressAction(temp, function(arr_json){
// 调用回调函数
callbacktips(arr_json);
});
}
}else{
_this.dropdown.hide();
_this.dropdown.find('li').remove();
}
}
}
// 初始化第一次时间
window.sessionStorage.setItem('nowTime',Date.now());
});
// 切换当前项
_this.dropdown.on('mouseenter','li',function(){
$(this).addClass("active").siblings().removeClass("active");
});
// 阻止输入过程中 方向键盘的默认事件
_this.entertext.on("keydown",_this.entertext,function(event){
EVT = event || window.event;
if( EVT.keyCode == 38 ){
EVT.preventDefault();
}
if( EVT.keyCode == 40 ){
EVT.preventDefault();
}
// enter键选取对应的 li
if( EVT.keyCode == 13 ){
EVT.preventDefault();
var txt = _this.dropdown.find(".active").html();
var test_txt = _this.entertext.val();
var arr_change = test_txt.split(" ");
// 以空格切割文本返回数组
var arr_test = test_txt.split(" ");
// 获取数组最后一个元素
var temp = arr_test[arr_test.length-1];
var temp_type = temp.split("");
var temp_dot = temp_type.lastIndexOf(".");
var n ;
temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt);
n = temp_type.join('');
arr_change.splice(arr_change.length-1,1,""+n);
_this.entertext.val(arr_change.join(" "));
_this.dropdown.hide();
_this.dropdown.find('li').remove();
}
});
// 点击替换 重组val
$(document).on("click",'li',function(){
var txt = $(this).html();
var test_txt = _this.entertext.val();
var arr_change = test_txt.split(" ");
// 以空格切割文本返回数组
var arr_test = test_txt.split(" ");
// 获取数组最后一个元素
var temp = arr_test[arr_test.length-1];
var temp_type = temp.split("");
var temp_dot = temp_type.lastIndexOf(".");
var n ;
temp_type.splice(temp_dot+1,temp_type.length-1-temp_dot,txt);
n = temp_type.join('');
arr_change.splice(arr_change.length-1,1,""+n);
_this.entertext.val(arr_change.join(" "));
_this.dropdown.hide();
_this.dropdown.find('li').remove();
});
// 调用获取坐标方法 show(elem)
$(this).keyup(function(){
show(this);
});
// 调用 kingwolfofsky， 获取光标坐标
function show(elem) {
var p = kingwolfofsky.getInputPositon(elem);
var s = _this.dropdown.get(0);
var ttop = parseInt(_this.entertext.css("marginTop"));
var tleft = parseInt(_this.entertext.css("marginLeft"))
console.log(ttop);
s.style.top = p.bottom-ttop+10+'px';
s.style.left = p.left-tleft + 'px';
}
});
}
});
//默认参数
var defaults = {
triggerCharacter : '$',
dropdownWidth:'150px'
};
})(window.jQuery);
//调用,还是上面的调用
$("#test").editTips({
triggerCharacter : '$',
dropdownWidth:'150px',
keyPressAction:function(temp,callbacktips){
var arr_json;
if( temp == "$" ){
arr_json = ["$a","$ab","$b","$bb 副科级"]
}
if(temp && temp.indexOf("$a")== 0){
arr_json = ["$a","$ab"];
}
else if(temp && temp.indexOf("$b")== 0){
arr_json = ["$b","$bb 这个是说明"];
}
callbacktips(arr_json);
}
});
</script>
如果想使用的时候显得高大上的感觉，其中的不足和高级功能需要你自己去补充了。
出处：http://www.cnblogs.com/wbsndbf/p/7976300.html
如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【关注我】。(●'◡'●)
因为，我的写作热情也离不开您的肯定与支持，感谢您的阅读，我是【Jack_孟】！
本文来自博客园，作者：jack_Meng，转载请注明原文链接：https://www.cnblogs.com/mq0036/p/7986385.html
【免责声明】本文来自源于网络，如涉及版权或侵权问题，请及时联系我们，我们将第一时间删除或更改！
posted on 2017-12-05 13:14 jack_Meng 阅读(9802) 评论(0) 编辑 收藏 举报
