사용자가 키보드 입력을 받아서 화면에 표시하는 방법

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/. Btw 이것은 정말 좋은 아이디어입니다 - 일단 온라인으로 끝나면 끝나나요?