2016-08-02 36 views
0

Hier ist mein Code, ev.pageX Ereignis funktioniert nicht. Ich verstehe nicht warum es so ist. Aber es funktioniert mit dem Klickereignis. Das hier verwendete Ereignis ist das Tastendruckereignis, ich suche nach dem Wert von ev.pageX, so dass ich die absoluten CSS-Parameter entsprechend in dem Textfeld formatieren kann.pageX und pageY mit jQuery Keypress-Ereignis funktioniert nicht

Hilfe benötigt!

<head> 

    <style> 
    textarea{ 
    width:300px; 
    height:300px; 
    } 

.popup{ 
    position:absolute; 
    border:1px solid gray; 
} 
</style> 

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

<body> 

<textarea></textarea> 

<script> 
    $(function() { 
     var $popup = $('<select/>', { 
      'html': 'popup' 
     }) 
      .addClass('popup') 
      .appendTo('body') 
      .append($('<option/>').html('lala'), 
        $('<option/>').html('blabla')) 
      .change(function() { 
       $(this).fadeOut(); 
      }) 
      .hide(); 



     $('textarea').keypress(function(ev) {    
      if ($popup.is(':visible')) { 
       $popup.fadeOut(); 
      } else { 
       if (ev.keyCode === 32) { 
        console.log('pressed');    

        ev.preventDefault() 
        var pagex = ev.pageX;        
        console.log(pagex); 

        $popup.css({ 
         'left': ev.pageX + 10, 
         'top': ev.pageY - 10 
        }); 


        $popup.fadeIn(); 

        console.log('working'); 
       } 
       }     


     }); 



    }); 
</script> 
</body> 

+0

'pageX' und' pageY' sind für Mausereignisse, nicht für Tastaturereignisse, denke ich. – gcampbell

Antwort

0

Ihr Verweis auf ev auf einem Tastendruck-Ereignis ist, während pageX und pageY für Mausereignisse reserviert sind.

Sie könnten die Mauskoordinaten beim Bewegen der Maus verfolgen, die Werte einem globalen zuweisen und dann das Popup mit dem zuletzt aufgezeichneten globalen Wert platzieren. Dies kann jedoch je nach Anwendungsfall zu ressourcenintensiv sein.