我试图显示我的房子点击的输入，如果我没有在put中输入任何东西，该输入将在下一次鼠标点击中显示。不知何故，我似乎无法在输入中键入。

我有

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<style type="text/css">
html,
body {
    height: 100%;
}

i{
    z-index:10000;
    color: white;
    font-size: 20px;
}


.btn-done {
    z-index:10000;
    position: absolute;
    right: 5px;
    top: 5px;
}

.btn-done {
    z-index:10000;
    position: absolute;
    right: 15px;
    top: 5px;
}

</style>

<a href="/api-mapper" class="btn btn-default btn-cancel">Cancel</a>
<a class="btn btn-success btn-done">Done</a>

<img src="{{ \Storage::disk('s3')->url($apiMapperImage->full) }}" width="100%">

<script type="text/javascript">

    var pins = []; 
    var i = 0; 

    $("body").click(function(e) {

        var api = {}; 
        api.x = e.pageX-10;
        api.y = e.pageY-10;

        $("input").hide();
        const input = $('<i class="fa fa-location"></i> <input type="text" name="'+ api.x+'-'+api.y +'">').css("position", "absolute").css("top", e.pageY-10).css("left", e.pageX-10)
        $("body").append(input);
        pins.push(api);

        $("input").click(function(e) {
            console.log($(this).val())
        });

        console.log("pins",pins);
        
    
    });



</script>

顺晟科技：

如果你的问题只是不能打字 ，您需要聚焦输入

在

问题是，只要单击body，就会创建一个新的图标和输入元素。然后，当您单击input元素时，可以看到它（非常简短地）变得聚焦，但单击立即上升到正文，因此创建了另一个输入，在与第一个输入完全相同的地方重叠，因此它继续进行。

要停止此操作，必须停止输入元素上的单击到正文的传播，因此输入的onclick函数必须调用e.stoppropagation()

还有一个额外的问题，即图标的Z索引很高。这意味着它覆盖了新输入的第一部分，所以如果用户单击那里（这很有可能），单击不会导致输入聚焦。该代码段删除了z-index设置。

还有其他一些事情需要考虑--例如，为什么点击感应是在整个身体上而不是在实际的图像上？但是超出了这个问题的范围。