Question

我目前正在构建@user标记系统。我几乎得到了一件小事，我无法理解。我知道问题是什么，只是无法思考如何纠正它。

所以我将@符号放在div框中输入一个名字，选择它，然后将其插入到内容区域

<div cols="40" rows="5" name="newmsg" id="newmsg" placeholder="Say something <? echo $data['first']; ?>..." contenteditable="true"></div>

一切正常。但是在插入名称之后我想输入它并不会直接输入，直到我再次单击div并且每次点击它搜索的任何键时，带有数据的msgbox显示内容。

1.如果div已经选择并输入了.addname，我如何停止显示msgbox。 2.如何在每次按键后更改我的代码以使其不进行搜索。

我真的不知道facebook是如何做到的。我所知道的是他们使用textarea和一次您已经插入了一个名称，您可以在该标记人员之后立即输入该名称。

JS：

$(document).ready(function () {
    var start = /@/ig; // @ Match
    var word = /@(\w+)/ig; //@abc Match
    $("#newmsg").on("keyup", function () {
        var content = $(this).text(); //Content Box Data
        var go = content.match(start); //Content Matching @
        var name = content.match(word); //Content Matching @abc
        var dataString = 'searchword=' + name;
        //If @ available
        if (go.length > 0) {
            $("#msgbox").slideDown('show');
            $("#msgbox").html('<img src="load.gif" />');
            //if @abc avalable
            if (name.length > 0) {
                $.ajax({
                    type: "POST",
                    url: "textareausernameinsert.php", // Database name search 
                    data: dataString,
                    cache: false,
                    success: function (data) {
                        $("#msgbox").hide();
                        $("#msgbox").html(data).show();
                    }
                });
            }
        }
        return false;
    });

    //Adding result name to content box.
    $(".addname").live("click", function () {
        var username = $(this).attr('title');
        var old = $("#newmsg").html();
        var content = old.replace(word, "@"); //replacing @abc to (" ") space
        $("#newmsg").html(content);
        var E = "<a contenteditable='false' href='#'>" + username + "</a>";
        $("#newmsg").append(E);
        $("#msgbox").hide();

        INSERT AJAX HERE TO SEND CONTENT TO DATABASE, REMOVED AS NOT NEEDED.

    });
});

Answer 1

1.如果div已经选择并输入了.addname，我如何停止显示msgbox。

尝试找到一个，如果不存在则显示该框。

$("#newmsg").on("keyup", function () {
    if( $(this).find('.addname').length == 0 ) { ... }
}

2.如何在每次按键后将代码更改为不进行搜索。

例如，您可以在发送ajax时取消绑定keyup事件，并在ajax每个n字符返回结果或捕获事件时重新绑定。

我真的不知道facebook是怎么做到的。我所知道的是他们使用的是textarea，一旦你输入了一个名字，你就可以直接在那个被标记的人之后输入。

Facebook使用fake div方法。您还可以创建contenteditable div（example - 写某事并按空格键）

但是在插入名称后我想输入它不会输入（...）

There你有一个如何设置插入位置的答案。

使用@标记用户

1 个答案: