На основі Sina@ функції простий приклад

Маленька покидька · Опубліковано 28.06.2015 10:15:30

////---------------------------------@发布---------------------------//
function textChange(options) {
var opt = $.extend({
Content: ''
}, options);
var objId = opt.Content;
var obj = $("#" + objId);
obj.keydown(function (evt) {
var k = window.event ? evt.keyCode : evt.which;
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if (isChrome&&k==16) {
k=50;
}
//为@键值时
//这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if (k == 50 && evt.shiftKey) {
buildTip(obj, '');
}
else if (k == 13 || k == 38 || k == 40) { //回车
if ($('#searchresult ul').length > 0) {
if (k == 38) { //上箭头
$('#searchresult a.searchHover').parent().prev().find("a").addClass("searchHover");
$('#searchresult a.searchHover').parent().next().find("a").removeClass("searchHover");
} else if (k == 40) { //下箭头
$('#searchresult a.searchHover').parent().next().find("a").addClass("searchHover");
$('#searchresult a.searchHover').parent().prev().find("a").removeClass("searchHover");
} else if (k == 13) { //回车
var selContent = $('#searchresult a.searchHover').attr('rname');
if (selContent == "" || selContent == undefined) return;
var content = selContent + ' ';
//移除textarea里面@后面多余数据
var pointIndex = getPositionForTextArea(obj[0]);
var searchName = "";
var atIndex = obj.val().substring(0, pointIndex).lastIndexOf("@", atIndex);
obj.val(obj.val().substring(0, atIndex + 1) + obj.val().substring(pointIndex));
var newIndex = getPositionForTextArea(obj[0]);
setCursorPosition(obj[0], newIndex - (newIndex - atIndex - 1));
resetPostion(content, obj);
$("#searchresult").remove();
}
evt.returnValue = false;
return false;
}
}
else {
//$("#searchresult").remove();
}
});
obj.keyup(function (evt) {
var k = window.event ? evt.keyCode : evt.which;
if (k != 13 && k != 38 && k != 40) {
if ($('#searchresult ul').length > 0) {
var pointIndex = getPositionForTextArea(obj[0]);
var searchName = "";
var atIndex = obj.val().substring(0,pointIndex).lastIndexOf("@", atIndex);
searchName = obj.val().substring(atIndex + 1, pointIndex);
buildTip(obj, searchName);
}
}
});
}
//构建提示信息
function buildTip(obj, serachname) {
$.ajax({
type: 'post',
url: '',
data: '',
dataType: 'json',
success: function (data) {
var objData = data.list;
if (objData.length > 0) {
if ($("#searchresult").length > 0)
$("#searchresult").remove();
var layer = "";
layer = "<div id='searchresult'><ul>";
$.each(objData, function (idx, item) {
layer += "<li><a href='javascrip去掉t:void(0);' ></a></li>";
});
layer += "</ul></div>";
//将结果添加到div中
obj.after($(layer));
$("#searchresult a:first").addClass("searchHover");
$("#searchresult").css("display", "");
//鼠标点击事件
$("#searchresult a").click(function () {
var content = $(this).attr('rname') + ' ';
resetPostion(content, obj);
$("#searchresult").empty();
$("#searchresult").css("display", "none");
});
$("#searchresult a").each(function () {
$(this).mouseover(function (e) {
$("#searchresult a").removeClass("searchHover");
$(this).addClass("searchHover");
});
});
//evt.stopPropagation();
//处理js事件冒泡问题
$('body').bind("click", function (e) {
$("#searchresult").remove();
e.stopPropagation();
});
$("#searchresult").bind("click", function (e) {
e.stopPropagation();
});
} else {
$("#searchresult").remove();
}
}
});
}
var cpos = 0;
function resetPostion(content, target) {
var tc = target[0];
if (document.selection) {//ie
target.bind("click keyup", function (e) {//点击或键盘动作时设置光标值
e.stopPropagation();
cpos = getPositionForTextArea(tc);
});
}
var tclen = target.val().length;
var pos = 0;
if (typeof document.selection != "undefined") {//IE
target.focus();
//setCursorPosition(tc, cpos);//设置焦点
document.selection.createRange().text = content;
//计算光标位置
pos = getPositionForTextArea(tc);
} else {//火狐
//计算光标位置
pos = tc.selectionStart + content.length;
target.val(target.val().substr(0, tc.selectionStart) + content + target.val().substring(tc.selectionStart, tclen));
}
cpos = pos;
setCursorPosition(tc, pos); //设置焦点
}
//textarea设置光标位置
function setCursorPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {// IE Support
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
//获取多行文本框光标位置
function getPositionForTextArea(obj, content) {
var CaretPos = -1;
if (typeof document.selection != "undefined") {//IE
var Sel = document.selection.createRange();
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(obj);
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
CaretPos++;
}
}
else {
if (content == undefined)
content = "";
CaretPos = obj.selectionStart + content.length;
}
return CaretPos;
}

Копія коду

[JavaScript] На основі Sina@ функції простий приклад

Переглянуті розділи