pageX and pageY with jQuery Keypress event not working
<p>Here is my code, ev.pageX event is not working. I am not understanding why it so. But, its working with the click event. Event here used is the keypress event, I am looking for the value of ev.pageX so I could format the css absolute parameters according inside the text box. </p>

<p>Help needed!</p>

<p></p>

<pre><code>&lt;head&gt;

    &lt;style&gt;
    textarea{
    width:300px;
    height:300px;  
    }

.popup{
    position:absolute; 
    border:1px solid gray;  
}
&lt;/style&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;textarea&gt;&lt;/textarea&gt;

&lt;script&gt;
    $(function() {
        var $popup = $('&lt;select/&gt;', {
            'html': 'popup'
        })
            .addClass('popup')
            .appendTo('body')
            .append($('&lt;option/&gt;').html('lala'), 
                    $('&lt;option/&gt;').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');
                }
                }                   


        });



    });
&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>