Dynamically append input where mouse clicked

I’m trying to show an input where my house clicked, if I don’t enter anything in the put, the input will show in the next mouse click. Somehow, I can’t seems to type inside that input.

I have

<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>

Answer

if your problem just you can’t type , you need to focus input

Add $("input").focus(); after pins.push(api);

Advertisement

Answer