Javascript 将元素放置在用户单击的位置

我创建了一个看起来像虚拟文本区域的div，当用户单击它时，我的代码创建了一个没有边框和轮廓的输入元素，这样用户就感觉他在文本区域中键入。在那个输入元素上，我给它们自动完成，当用户选择一个选项时，元素被添加到文本区域。实际上，用户感觉就像是在文本区自己打字

但是，我还希望用户能够在文本区域中来回移动，以便编辑或删除先前添加的元素。按箭头键，我可以在元素之前或之后移动输入框。但我也希望用户能够单击文本区域中的任意位置，并将输入元素放在那里，以便用户可以在那里键入内容

底线是，在单击textarea时，我想检测用户到底单击了哪个元素。谢谢

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

创建输入元素的代码如下：

$(".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();
        }
    });

$（“.textarea”）。单击（函数（）{
如果（$（this.find（.placeholder”）.length>0）$（this.find（.placeholder”）.remove（）；
if（$（this）.find（“.element input”）.length>0）{
$（this.find（“.element input”）.focus（）；
}否则{
变量输入=$（“”）；
$（此）.append（输入）；
input.focus（）；
}
});

---

每个输入元素都有一个类

elm

。当用户在两个元素之间单击时，我想检测用户在哪个元素之前单击过

以下是一种根据鼠标单击客户端x&y值在单击位置之前查找元素的方法

$（“.textarea”）。单击（函数（e）{
如果（e.target.id=='txtEditor'）
返回true；
var elementBefore=null；
$（“.elm”）。每个（函数（）{
var startY=$（this）.position（）.top；
var endY=$（this.position（）.top+$（this.height（））；
如果（e.clientY>=startY&&e.clientY=startX&&e.clientX endX）{
如果（！elementBefore）
elementBefore=这个；
else if（（e.clientX-$（this.position（）.left）
<（e.clientX-$（elementBefore.position（）.left））{
elementBefore=这个；
}
}
}
});
if（elementBefore）{
//如果（$（this.find（.placeholder”）.length>0）$（this.find（.placeholder”）.remove（）；
if（$（this）.find（“.element input”）.length一些代码可以帮助我们帮助您；）请稍等，我将添加文本区域的快照和代码段。那么您的代码有什么问题吗？请阅读我的问题？这是一个线性文本框，您只能在末尾添加元素或从末尾删除。就像一个堆栈。我想让用户能够在文本区域中的任何位置进行编辑。哇。这似乎起作用了：D:D谢谢t、 让我先了解代码，然后接受答案。谢谢您的努力。：）
    $(".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();
        }
    });