Question

我希望拥有它，以便用户可以点击图像，并在他点击的位置输入内容，然后该文本将保留在那里。我现在有它可以显示黑盒子，但我需要它，所以用户可以在框旁边输入信息。我想为我父亲制作一个互动地图，他可以点击并显示他捕到某种鱼类的地方

$(document).ready(function() {
  $(document).click(function(ev) {
    $("body").append(
      $('<div></div>').css({
        position: 'absolute',
        top: ev.pageY + 'px',
        left: ev.pageX + 'px',
        width: '10px',
        height: '10px',
        background: '#000000'
      })
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

到目前为止，您的定位逻辑已经正常工作，我建议创建一个包含所有已知鱼类的数组。选择鱼后，您可以单击地图以标记位置。

function handleClick(x, y) {
   var myFish = $('#myDropdown option:selected').text();

   var fishElement = $('#map').append("<p style='position: absolute; top: "+y+"px; left: "+x+"px;'>"+myFish+"</p>");

}

 $(document).click(function(ev) {
   handleClick(ev.pageX, ev.pageY)
 }

HTML：

<select id="myDropdown">
  <option key="1" value="Shark"></option>
</select>

<div id="map" style="position: relative;"></div>

这是有效的：https://jsfiddle.net/vbnmdkn6/1/。顺便说一句，这是一个非常好的主意 - 一旦完成，它会上线吗？

如何获取用户键盘输入并将其显示在他们键入的屏幕上

1 个答案: