Question

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

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

底线，点击textarea，我想检测用户点击之前的元素。谢谢。

更新这是文本区域的快照，其中包含一些元素。 Custom 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();
        }
    });

每个input元素都有一个类elm。当用户在2个元素之间单击时，我想检测用户单击的元素。

Answer 1

这是在点击位置之前找到元素的一种方法，基于鼠标点击客户端x＆amp; 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();
        }
    });

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

1 个答案: