在鼠标单击的位置动态附加输入

Question

我试图在点击我的房子的地方显示一个输入，如果我没有在输入中输入任何内容，输入将在下一次鼠标点击时显示。不知何故，我似乎无法在该输入中输入内容。

我有

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

如果你的问题只是你不能打字 , 你需要关注 input

在pins.push(api);

之后添加$("input").focus();

Answer 2

问题是，一旦您点击 body，您就会创建一个新的图标和输入元素。然后，当您点击输入元素时，可以看到它（非常短暂地）成为焦点，但点击立即上升到 body 并且因此创建了另一个输入，在与第一个输入完全相同的位置，就这样继续下去。

要停止这种情况，您必须停止将输入元素上的点击传播到 body，因此输入的 onclick 函数必须调用 e.stopPropagation()

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

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

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

在鼠标单击的位置动态附加输入

Dynamically append input where mouse clicked

html

javascript

css

jquery

input