控制backspace键删除字符实现微博用户删除+展现选择好友列表

最近项目中应用到了微博系统。本人做了一个模仿微博一键删除一个用户的功能和选定好友的功能。

功能截图如下:

说明：主要是onpropertychange事件和onkeydown事件

代码如下：

案例一：onpropertychange的应用[微博字数控制]

 

 

Html：

还可以输入<font id="textnumwin">300</font>字

<textarea id="content" name="content"onpropertychange="javascript:textareaChangeWin(this)"></textarea>

 

Js控制：

//计算还可以输入多少text---Win

function textareaChangeWin(thisp){

    var len = thisp.innerHTML.length;  //取得目前的字符长度

    var l = 300-len;            //还剩下多少字可以输入

    var textval = thisp.innerHTML;

    if(len >300){

       l = 0;

       textval = textval.substr(0,300);   //如果大于300就截取

       thisp.innerHTML = textval;

    }

    $('#textnumwin').text(l);

}

 

 

 

案例2：微博控制backspace键删除一个用户

Html：

发给：<input onkeydown="DeleteUserNameMore(event)" class="alerttxt" type="text"id="fname" name="fname"onpropertychange="javascript:listFriend(this)"/>

<ul class="recommend-list" id="friendUl" style="display:none;">

</ul>

 

Js控制—删除字符：

//一下backspace键删除一个用户，而不是一个字符

function DeleteUserNameMore(e){

       var keynum;

       if(window.event) // IE

       {

         keynum = e.keyCode

       }

       else if(e.which) // Netscape/Firefox/Opera

       {

         keynum = e.which

       }

       if(keynum == 8){

           //删除一个用户的操作

           var fnameval = document.getElementById("fname").value;

           var touseridval = document.getElementById("touserid").value;

          

          

           var lastIndexF = fnameval.lastIndexOf(';');   //最后一个分号的位置

           var resultFnameStr = '';

           var resultTouseridStr = touseridval;

           if(fnameval.indexOf(';') != -1){   //有分号

              if(lastIndexF == fnameval.length-1){     

                  //分号在最后的位置,直接删除一个用户

                  resultFnameStr =fnameval.substring(0,fnameval.substring(0,fnameval.length-1).lastIndexOf(';')+1);

                  resultTouseridStr =touseridval.substring(0,touseridval.substring(0,touseridval.length-1).lastIndexOf(';')+1);

                  e.returnValue=false; //禁用backspace

              }else{

                  //有分号但是不在最后一个位置，不做任何处理nothing

                  resultFnameStr = fnameval;

              }

           }else{ //没有分号

              resultFnameStr =fnameval;

           }

           document.getElementById("fname").value = resultFnameStr;

           document.getElementById("touserid").value =resultTouseridStr;

       }

    }

 

 

 

 

 

2、Js控制列出好友列表（附件）---代码未给全。自己备注用，主要看回调函数中的操作DOM就可以了

 

//展现好友列表

    function listFriend(thisp){

           var likeScreenName =thisp.value;

          

           PlayUl();  //显示自动提示ul

           var platformval = $('#currentPlatform').val();   //当前平台腾讯Or新浪

           var currentUserid = $('#currentUserid').val();   //当前账号平台ID

          

          

           var currentScreenName = '';

           if(likeScreenName.indexOf(';') != -1){

              var ScreenArray =likeScreenName.split(';');

              currentScreenName = ScreenArray[ScreenArray.length-1]

           }else{

              currentScreenName =likeScreenName;      

           }

          

          

           var dataJson = {

              platform :platformval,

              userid : currentUserid,

              likesc : currentScreenName

           }

           jQuery

                  .ajax({

                     async : true,//同步还是异步,false=同步,默认是异步方式.

                     type : 'post',

                     data : dataJson,

                     url : "ListFriendFollow.action",

                     success : function(obj) {

                         obj =decodeURIComponent(obj);

                         obj = eval('('+obj+')');

                         $('#friendUl').text(''); //重置li

                         var listfriend = obj.data;

 

                         for(var i = 0 ; i < listfriend.length ; i++){

                            $('<li />').attr('onclick','javascript:TransferToUserid(this)').attr('id',listfriend[i].userid).text(listfriend[i].screenName).appendTo('#friendUl');

                         }

                     }

                  });

    }