zoukankan      html  css  js  c++  java
  • 功能简单例子

    ////---------------------------------@发布---------------------------//
    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;

    }

  • 相关阅读:
    PHP全栈学习笔记3
    PHP全栈学习笔记3
    JavaScript基础系列
    JavaScript基础系列
    Java语言
    Java语言
    HTML基础系列
    HTML基础系列
    PHP全栈从入门到精通1
    PHP全栈从入门到精通1
  • 原文地址:https://www.cnblogs.com/huangf714/p/5795056.html
Copyright © 2011-2022 走看看