How to take the users keyboard input and display it on the screen where they type

问题内容:

I want to have it so the user can click on an image, and where he clicked, type something, and that text will stay there. I currently have it where I can display an black box, but I need it so the user can type info next to the box.
I want to make an interactive map for my dad where he can click and display where he caught a certain type of fish

<body background="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(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>
</body>

问题评论:

    
is your positioning logic working?

答案:

答案1:

so far your positioning logic is already working, i’d recommend to create an array with all known fish types. Once you have selected a fish you can click on the map to mark the position.

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>

this should work, but not tested yet. Btw this is a really nice idea – will this go online once finished?

答案评论:

    
This was for my dad for christmas, but if i like the idea enough, i just might do that
– Sean Theisen
2 hours ago
    
Also this does not work
– Sean Theisen
1 hour ago
    
this is just an example….note that for example the map div has no width or height at my example. If you provided a jsfiddle demo i could have a look at your code
    
i cant get js fiddle to work,
– Sean Theisen
50 mins ago
    
so publish the broken one – i will have a look

原文地址:

https://stackoverflow.com/questions/47753982/how-to-take-the-users-keyboard-input-and-display-it-on-the-screen-where-they-typ

添加评论