功能简单例子

////---------------------------------@发布---------------------------//
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='javascript: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;

}

posted @ 2016-08-22 11:51  芜明-追星  阅读(275)  评论(0编辑  收藏  举报