JQuery contextMenu (by SWIS) - how to access textarea value from entry event/keyup function?

Question

I'm trying to use input capabilities of jQuery contextMenu by SWIS, but documentation is very poor and I can't find out how to obtain the value of text (here textarea) input value from within the events/keyup function. I have hope that someone maybe know that library better or maybe authors didn't describe it because it's obvious for people who knows jQuery very well - so it's not me.

<script src="includes/jquery.min.js"></script>
<link rel="stylesheet" href="js/contextmenu/jquery.contextMenu.css">
<link rel="stylesheet" href="js/contextmenu/foundation-icons/foundation-icons.css">
<script src="js/contextmenu/jquery.contextMenu.js"></script>
<script src="js/contextmenu/jquery.ui.position.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $.contextMenu({
        selector: '.jobs',
        zIndex: 10,
        build: function($triggerElement, e){
            return {
                items: {
                    quicknote: {
                        name: "Quick Note",
                        type: 'textarea', 
                        value: 'test', 
                        events: {
                            keyup: function(e) {
// Here I want to get edited value. 
// I've tried that, but didn't work: window.console && console.log($.contextMenu.inputs[0].$input.val()); 
                            }
                        }
                    },
                    "sep0": "---------",
                    copy: {
                        name: "Copy",
                        callback: function(itemKey, opt){ 
                            copyToClipboard(opt.$trigger.attr("name"));
                        }
                    },
                },
            };
        }
    });
});
</script>

As you see in the code - I've tried to use following path: $.contextMenu.inputs[0].$input.val() but it didn't work. I was trying also e.data.$input.val(), this.$input.val() and many others, but it was blind search. Some found somewhere in the internet, but no success.

If someone could find the solution? I want the value of text area to be processed while editing. Basically every key press (while editing text area) should trigger some ajax function that will send value to the server. Ajax is not the issue, but the value, so if someone could help me with that I will be really grateful. Thanks :)

Answer 1

I spent some time tracking the keyup event in developers tools, and found that value should be available as

e.srcElement.value 

I don't know why srcElement was undefined, but I found that value should be also available as this.value, and that worked.

So, sometimes simplest answer is good.

Here is whole code:

<script src="includes/jquery.min.js"></script>
<link rel="stylesheet" href="js/contextmenu/jquery.contextMenu.css">
<link rel="stylesheet" href="js/contextmenu/foundation-icons/foundation-icons.css">
<script src="js/contextmenu/jquery.contextMenu.js"></script>
<script src="js/contextmenu/jquery.ui.position.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $.contextMenu({
        selector: '.jobs',
        zIndex: 10,
        build: function($triggerElement, e){
            return {
                items: {
                    quicknote: {
                        name: "Quick Note",
                        type: 'textarea', 
                        value: 'test', 
                        events: {
                            keyup: function(e) {
                                window.console && console.log('key: '+ e.keyCode + this.value); 

                            }
                        }
                    },
                    "sep0": "---------",
                    copy: {
                        name: "Copy",
                        callback: function(itemKey, opt){ 
                            copyToClipboard(opt.$trigger.attr("name"));
                        }
                    },
                },
            };
        }
    });
});
</script>