pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

詳解微博發(fā)言框的@功能

html5教程 html5模板網(wǎng)
經(jīng)常使用微博的人會發(fā)現(xiàn)，當我們在輸入框輸入@然后敲一個人的名字，會彈出一個tip提示層，如圖所示：出于對這個功能的好奇，并抱著學(xué)習的態(tài)度，翻閱了一些資料后對這個Javascrip
經(jīng)常使用微博的人會發(fā)現(xiàn)，當我們在輸入框輸入@然后敲一個人的名字，會彈出一個tip提示層，如圖所示：

weibo.jpg



出于對這個功能的好奇，并抱著學(xué)習的態(tài)度，翻閱了一些資料后對這個Javascript進行了探討和研究。
對這個功能進行分析如下：

1、確定光標的位置

2、textarea文本框里對字符串@的判斷

3、tip的彈出事件

4、鍵盤的操作事件

5、ajax調(diào)用

6、文字的插入

......

當然還有其他的功能。

看著是不是感覺很復(fù)雜？沒關(guān)系，我們一步一步的分析。

首先我們要確定textarea的光標位置。在W3C中，獲取光標位置比較簡單，可以用selectionStart和selectionEnd，IE瀏覽器不支持這2個屬性 ，但是IE又一個document.selection對象，可以模擬實現(xiàn)相同的功能。代碼如下：


  1. //先定義一個基本類，來設(shè)置一些全局變量
  2. function demonAt(opts) {
  3.     this.elem=opts.elem; //文本框
  4.     this.at= {};    //臨時保存文本框內(nèi)容截取屬性
  5.     this.opt= {};
  6.     this.searched=""; //用于判斷用戶輸入字符是否和前面一樣，如果一樣跳過ajax
  7.     this.url=opts.url;
  8.     this.index=1;
  9. }
  10. //微博的@功能
  11. demonAt.prototype= {
  12.     getCursor: function(elem) {
  13.         var _this=this;
  14.         var rangeData = {
  15.             start: 0,
  16.             end: 0,
  17.             text: ""
  18.         };
  19.         if(typeof(this.elem.selectionStart)=="number") {//W3C
  20. rangeData.start=this.elem.selectionStart;//光標起始位置
  21.             rangeData.end=this.elem.selectionEnd;//光標末尾位置
  22. rangeData.text=this.elem.value.substring(0,this.elem.selectionStart);//獲取文本框value
  23.         } else if (document.selection) {//IE
  24.             var sRange=document.selection.createRange();
  25.             var oRange=document.body.createTextRange();
  26.             oRange.moveToElementText(this.elem);
  27.             rangeData.text=sRange.text;
  28.             rangeData.bookmark = sRange.getBookmark();
  29. for(i=0;oRange.compareEndPoints("StartToStart",sRange)< 0 && sRange.moveStart("character", -1) !== 0; i ++) {
  30.                 if (this.elem.value.charAt(i) == '\r') {
  31.                     i ++;//IE的特殊處理，遇到enter鍵需要加1
  32.                 }
  33.             }
  34.             rangeData.start=i;
  35.             rangeData.end = rangeData.text.length + rangeData.start;
  36.             rangeData.text=this.elem.value.substring(0,i);
  37.         }
  38.         //alert(rangeData.text)
  39.         return rangeData;
  40.     },
  41.     setCursor: function(elem,start,end) {//設(shè)置光標
  42.         if(this.elem.setSelectionRange) {//W3C
  43.             this.elem.setSelectionRange(start,end);
  44.         } else if(this.elem.createRange) {//IE
  45.             var range=this.elem.createRange();
  46.             if(this.elem.value.length==rangeData.start) {
  47.                 range.collapse(false);
  48.                 range.select();
  49.             } else {
  50.                 range.moveToBookmark(rangeData.bookmark);
  51.                 range.select();
  52.             }
  53.         }
  54.     },
  55.     add: function(elem,txtData,nStart, nLen) {//插入文本參數(shù)操作的元素，數(shù)據(jù)，起始坐標位置，用戶輸入字符長度
  56.         //this.setCursor(this.elem,this.rangeData);
  57.         this.elem.focus();
  58.         var _range;
  59.         if(this.elem.setSelectionRange) {//W3C
  60.             _tValue=this.elem.value;//獲取文本框內(nèi)容
  61.             var _start = nStart - nLen,//設(shè)置光標起點光標的位置-離@的文本長度
  62.             _end = _start + txtData.length,//設(shè)置光標末尾，start+數(shù)據(jù)文字長度
  63.             _value=_tValue.substring(0,_start)+txtData+" "+_tValue.substring(nStart, this.elem.value.length);
  64.             this.elem.value=_value;
  65.             this.setCursor(this.elem,_end+1,_end+1);
  66.         } else if(this.elem.createTextRange) {
  67.             _range=document.selection.createRange();
  68.             _range.moveStart("character", -nLen);//移動光標
  69.             _range.text = txtData+" ";
  70.         }
  71.     }
  72. }
復(fù)制代碼


自定義一個rangeData對象，保存光標的位置和textarea框內(nèi)從光標位置到開始處的字符串；返回出來。這個對象在下面其他函數(shù)中會用到。根據(jù)光標位置的確定，可以書寫文字插入函數(shù)add();有了上面的函數(shù)，我們可以對textarea框內(nèi)@的字符判斷，然后實現(xiàn)tip層定位和彈出，如果判斷這個，我們可以用正則：

  1. var _reg=/@[^@\s]{1,20}$/g;
復(fù)制代碼


那么定位呢，若在textarea內(nèi)判斷是不現(xiàn)實的，因為我們無法獲取正確的left和top值，所以這里需要模擬一個div層，將div插入到body 中，定位到與textarea相同的位置，然后獲取到textarea內(nèi)的文字，進行字符串的拆分，加上標簽元素，這樣可以獲取到正確的位置。說的有點繞了，看下面代碼能更直觀的表達。

  1. var _string="<span>"+"@前面的文字"+"</span>"+"<cite>@</cite>"+"<span>"+"@后面的文字"+"</span>";
復(fù)制代碼


看到這句，很多人應(yīng)該理解做法，將這段append到上訴定位的div中，這樣，我們可以通過<cite>標簽獲取到offset值了。于是我們寫下面的代碼:


  1. demonAt.prototype= {
  2.     init: function() {//首先我們要初始化
  3.         var _body=$("body");
  4.         var _div=$("<div id='tWarp'></div>"),
  5.         _tip=$("<div id='tipAt'></div>");
  6.         _body.append(_div);
  7.         _body.append(_tip);
  8.         var _left=$(this.elem).offset().left+"px",
  9.         _top=$(this.elem).offset().top+"px",
  10.         _width=$(this.elem).outerWidth()+"px",
  11.         _height=$(this.elem).outerHeight()+"px",
  12.         _lineHeight=$(this.elem).css("line-height"),
  13.         _style="position:absolute;overflow:hidden;z-index:-9999;line-height:"+_lineHeight+";width:"+_width+";height:"+_height+";left:"+_left+";top:"+_top;
  14.         _div.attr("style",_style);
  15.         this.inset();
  16.     },
  17.     getAt: function() {
  18.         var _rangeData=this.getCursor();
  19.         var k=_value=_rangeData.text.replace(/\r/g,"");//去掉換行符
  20.         var _reg=/@[^@\s]{1,20}$/g;//正則，獲取value值后末尾含有@的并且在20字符內(nèi)
  21.         var _string="";
  22.         if(_value.indexOf("@")>=
  23.         0&&_value.match(_reg)) {
  24.             var _postion=_rangeData.start;
  25.             var _oValue=_value.match(_reg)[0];//找到value中最后匹配的數(shù)據(jù)
  26.             var vReg=new RegExp("^"+_oValue+".*$","m");//跟數(shù)據(jù)匹配的正則   暫時保留
  27.             _value=_value.slice(0, _postion); //重寫_value 字符串截取  從0截取到光標位置
  28.             if(/^@[a-zA-Z0-9\u4e00-\u9fa5_]+$/.test(_oValue)&& !/\s/.test(_oValue)) {
  29.                 this.at['m'] = _oValue = _oValue.slice(1);//用戶輸入的字符  如@頹廢小魔，即"頹廢小魔"
  30.                 this.at['l'] = _value.slice(0, -_oValue.length - 1); //@前面的文字
  31.                 this.at['r'] = k.slice(_postion - _oValue.length, k.length);//@后面的文字
  32.                 this.at['pos']=_postion;//光標位置
  33.                 this.at['len']=_oValue.length;//光標位置至@的長度，如 @頹廢小魔，即"頹廢小魔"的長度
  34.                 this.showTip(this.url)
  35.             } else {//alert(1)
  36.                 this.hiddenTip()
  37.             }
  38.         } else {
  39.             this.hiddenTip()
  40.         }
  41.     },
  42.     buidTip: function() {//創(chuàng)建tip，設(shè)置tip的位置
  43.         var _this=this;
  44.         $("#tWarp").empty();
  45.         var _string="<span>"+this.format(this.at['l'])+"</span>"+"<cite>@</cite>"+"<span>"+this.format(this.at['r'])+"</span>";
  46.         $("#tWarp").html(_string);
  47.         var _left=$("#tWarp cite").offset().left+"px",
  48.         _top=$("#tWarp cite").offset().top+parseInt($("#tWarp").css("line-height"))+"px";
  49.         if(parseInt(_top)>parseInt($("#tWarp").offset().top+$("#tWarp").height())) {
  50.             _top=$("#tWarp").offset().top+$("#tWarp").height()+"px";
  51.         }
  52.         $("#tipAt").css({
  53.             "left":_left,
  54.             "top":_top,
  55.             "display":"block"
  56.         });
  57.         $("#tipAt li").eq(1).addClass("on").siblings().removeClass("on");
  58.         _this.hover();
  59.         //取消keyup綁定，綁定keydown，鍵盤操作選擇，避免與文本框的事件沖突
  60.         $(_this.elem).unbind('keyup').bind('keydown', function(e) {
  61.             return _this.keyMove(e);
  62.         });
  63.     },
  64.     hiddenTip: function() {
  65.         var _this=this;
  66.         $("#tipAt").css("display","none");
  67.         $("#tipAt li").unbind("click,mouseover");
  68.     }
  69. }
復(fù)制代碼


然后我們添加鍵盤的操作，這里注意的是，我們在textarea輸入文字的時候已經(jīng)綁定keyup事件，為了避免事件多次綁定，tip的選擇我們用keydown事件處理。

  1. demonAt.prototype= {
  2.     keyMove: function(e) {//鍵盤操作
  3.         var _this=this;
  4.         var _key=e.keyCode;
  5.         var _len=$("#tipAt li").length;
  6.         switch(_key) {
  7.             case 40:
  8.                 //下
  9.                 _this.index++;
  10.                 if(_this.index>_len-1) {
  11.                 _this.index=1;
  12.                 }
  13.                 _this.keyMoveTo(_this.index);
  14.                 //return false一定要加上，不然JS會繼續(xù)進行調(diào)用keyHandler，從而綁定了keyup事件影響到鍵盤的keydown事件
  15.                 return false;
  16.                 break;
  17.             case 38:
  18.                 //上
  19.                 _this.index--;
  20.                 if(_this.index<1) {
  21.                 _this.index=_len-1;
  22.                 }
  23.                 _this.keyMoveTo(_this.index);
  24.                 return false;
  25.                 break;
  26.             case 13:
  27.                 //enter鍵
  28.                 var txtData=$(".on").text();
  29.                 _this.add(_this.elem,txtData,_this.at['pos'],_this.at['len'])
  30.                 _this.keyHandler()
  31.                 return false;
  32.                 break;
  33.             default:
  34.         };
  35.         _this.keyHandler();
  36.     },
  37.     keyHandler: function() {
  38.         var _this=this;
  39.         _this.index=1;
  40.         //enter鍵盤操作后重新綁定keyup
  41.         $(_this.elem).unbind("keydown").bind("keyup", function() {
  42.             _this.getAt();
  43.         })
  44.     },
  45.     keyMoveTo: function(index) {
  46.         $("#tipAt li").removeClass("on").eq(index).addClass("on");
  47.     }
  48. }
復(fù)制代碼


然后添加tip的點擊事件和hover事件。

  1. demonAt.prototype= {
  2.     inset: function() {//給li綁定事件，
  3.         var _this=this;
  4.         $("#tipAt").delegate("li","click", function() {//事件委托
  5.             if($(this).index()==0) {
  6.                 _this.elem.focus();
  7.                 return false;
  8.             } else {
  9.                 var txtData=$(this).text();
  10.                 _this.add(_this.elem,txtData,_this.at['pos'],_this.at['len'])
  11.                 _this.hiddenTip()
  12.             }
  13.         })
  14.     },
  15.     hover: function() {
  16.         //hover事件
  17.         var _this=this;
  18.         $("#tipAt li:not(:first)").hover( function() {
  19.             _this.index=$(this).index();
  20.             $(this).addClass("hover").siblings().removeClass("on hover")
  21.         }, function() {
  22.             $(this).removeClass("hover");
  23.         })
  24.     }
  25. }
復(fù)制代碼

到這里，微博的@功能就已經(jīng)全部講解清楚了，希望各位可以清楚明白的了解。



轉(zhuǎn)自我愛貓貓技術(shù)博客

【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。

相關(guān)文檔推薦

由于實際運行環(huán)境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發(fā)者能夠決定的，開發(fā)者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應(yīng)用的豐富，HTML5 工程師們已經(jīng)不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應(yīng)用人性化的操作體驗，特別是原生應(yīng)用與生俱來的豐富的手勢系統(tǒng)。HTML5 沒有提
你想要在自己網(wǎng)站上分享一個產(chǎn)品，或者是一個作品集，又或者僅僅只是一個靈感。在你發(fā)布到網(wǎng)上之前，你想讓它看起來有吸引力，專業(yè)，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設(shè)計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內(nèi)容有：框架與組件、構(gòu)建生態(tài)、開發(fā)技巧與調(diào)試、html、css與重構(gòu)、native/hybrid/桌面開發(fā)、前端/H5優(yōu)化、全棧/全端開發(fā)、研究實驗、數(shù)據(jù)分析與監(jiān)控、其它軟技能、前端技術(shù)網(wǎng)
主站蜘蛛池模板： 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 点焊机-缝焊机-闪光对焊机-电阻焊设备生产厂家-上海骏腾发智能设备有限公司 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | 钢骨架轻型板_膨石轻型板_钢骨架轻型板价格_恒道新材料 | 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 三防漆–水性三防漆–水性浸渍漆–贝塔三防漆厂家 | 德国GMN轴承,GMN角接触球轴承,GMN单向轴承,GMN油封,GMN非接触式密封 | 屏蔽服(500kv-超高压-特高压-电磁)-徐吉电气 | 棕刚玉_白刚玉_铝酸钙-锐石新材料 | 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | 悬浮拼装地板_篮球场木地板翻新_运动木地板价格-上海越禾运动地板厂家 | 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 | 代理记账_公司起名核名_公司注册_工商注册-睿婕实业有限公司 | 窖井盖锯圆机_锯圆机金刚石锯片-无锡茂达金刚石有限公司 | 金属软管_不锈钢金属软管_巩义市润达管道设备制造有限公司 | 点焊机-缝焊机-闪光对焊机-电阻焊设备生产厂家-上海骏腾发智能设备有限公司 | 陕西自考报名_陕西自学考试网| 圆形振动筛_圆筛_旋振筛_三次元振动筛-河南新乡德诚生产厂家 | 质构仪_鱼糜弹性仪-上海腾拔仪器科技有限公司 | 广东成考网-广东成人高考网| 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 二手Sciex液质联用仪-岛津气质联用仪-二手安捷伦气质联用仪-上海隐智科学仪器有限公司 | 陕西自考报名_陕西自学考试网 | 模切之家-专注服务模切行业的B2B平台！ | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 陶瓷砂磨机,盘式砂磨机,棒销式砂磨机-无锡市少宏粉体科技有限公司 | 游泳池设备安装工程_恒温泳池设备_儿童游泳池设备厂家_游泳池水处理设备-东莞市君达泳池设备有限公司 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 刮板输送机,粉尘加湿搅拌机,螺旋输送机,布袋除尘器 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | 耐酸碱胶管_耐腐蚀软管总成_化学品输送软管_漯河利通液压科技耐油耐磨喷砂软管|耐腐蚀化学软管 | 集菌仪_智能集菌仪_全封闭集菌仪_无菌检查集菌仪厂家-那艾 | 冷凝锅炉_燃气锅炉_工业燃气锅炉改造厂家-北京科诺锅炉 |