将元素放在用户点击的位置

Question

我创建了一个看起来像虚拟文本区域的 div，当用户单击它时，我的代码会创建一个没有边框和轮廓的输入元素，以便用户感觉他正在输入文本区域。在那个输入元素上，我给他们自动完成，当用户选择一个选项时，元素被添加到文本区域。几乎感觉就像用户正在输入文本区域本身。

但是，我还想让用户在文本区域中来回切换，以便他们可以编辑或删除他们之前添加的元素。按箭头键，我可以在元素之前或之后移动输入框。但我也想让用户点击文本区域中的任意位置并将输入元素放在那里，以便用户可以在那里输入。

底线，在点击文本区域时，我想检测用户点击了哪个元素之前。谢谢。

更新： 这是文本区域的快照，其中包含一些元素。

创建输入元素的代码是这样的：

$(".textarea").click(function(){
        if($(this).find(".placeholder").length>0) $(this).find(".placeholder").remove();
        if($(this).find(".element-input").length>0){
            $(this).find(".element-input").focus();
        }else{
            var input=$("<input class='element-input' name='element-input'/>");
            $(this).append(input);
            input.focus();
        }
    });

每个输入元素都有一个类elm。当用户在 2 个元素之间单击时，我想检测用户单击了哪个元素之前。

Answer 1

这是一种在单击位置之前查找元素的方法，基于 mouseclick 客户端 x 和 y 值。 Fiddle

    $(".textarea").click(function (e) {
        if (e.target.id == 'txtEditor')
            return true;

        var elementBefore = null;
        $(".elm").each(function () {
            var startY = $(this).position().top;
            var endY = $(this).position().top + $(this).height();
            if (e.clientY >= startY && e.clientY <= endY) {
                var startX = $(this).position().left;
                var endX = $(this).position().left + $(this).width();
                if (e.clientX >= startX && e.clientX <= endX) {
                    elementBefore = null;
                    return false; //do nothing if clicked within an elm
                }
                if (e.clientX > endX) {
                    if (!elementBefore)
                        elementBefore = this;
                    else if ((e.clientX - $(this).position().left)
                     < (e.clientX - $(elementBefore).position().left)) {
                        elementBefore = this;
                    }
                }
            }
        });

        if (elementBefore) {
            //if($(this).find(".placeholder").length>0) $(this).find(".placeholder").remove();
            if ($(this).find(".element-input").length <= 0) {
                var input = $("<input id='txtEditor' class='element-input' name='element-input'/>");
                $(this).append(input);
                input.focus();
            }
            $(this).find(".element-input").insertAfter($(elementBefore));
            $(this).find(".element-input").focus();
        }
    });