Dynamically append input where mouse clicked-CodePudding

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>

CodePudding user response：

The problem is that as soon as you get a click on body you create a new icon and input element. Then when you click on the input element it (very briefly) can be seen to become focused, but immediately the click goes up to the body and so another input is created, in exactly the same place overlaying the first one, and so it goes on.

To stop this you have to stop the propagation of a click on an input element to the body so the onclick function for an input must call e.stopPropagation()

There is the additional problem that the icon has a high z-index. This means it is overwriting the first part of the new input so if the user clicks there, which is highly likely, the click isn't causing the input to focus. The snippet removes the z-index setting.

There are some other things to be thought about - why is the click sensing on the whole of body rather than on the actual image for example? But beyond the scope of this question.

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) {
    e.stopPropagation();
    console.log($(this).val())
  });

  console.log("pins", pins);


});

html,
body {
  height: 100%;
}

i {
  /* z-index: 10000; REMOVED */
  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;
}

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

<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%">-->
<img src="https://picsum.photos/id/1015/200/300" />

CodePudding user response：

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

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