最近项目中应用到了微博系统。本人做了一个模仿微博一键删除一个用户的功能和选定好友的功能。
功能截图如下:
说明：主要是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');
}
}
});
}