Как предупредить значение на событие нажатия клавиши?

Question

$(document).ready(function(){
    var arr = [];   
    $(document).on('click', '.msg_head', function() {   
        var chatbox = $(this).parents().attr("rel") ;
        $('[rel="'+chatbox+'"] .msg_wrap').slideToggle('slow');
        return false;
    });
    $(document).on('click', '.close', function() {  
        var chatbox = $(this).parents().parents().attr("rel") ;
        $('[rel="'+chatbox+'"]').hide();
        arr.splice($.inArray(chatbox, arr), 1);
        displayChatBox();
        return false;
    });
    $(document).on('click', '#sidebar-user-box', function() {
        var userID = $(this).attr("class");
        var username = $(this).children().text() ;
        if ($.inArray(userID, arr) != -1)
        {
            arr.splice($.inArray(userID, arr), 1);
        }
        arr.unshift(userID);
        chatPopup = '<div class="msg_box" style="right:270px;z-index: 1000;" id="'+userID+'" rel="'+ userID+'">'+
                    '<div class="msg_head">'+username +
                    '<div class="close">x</div> </div>'+
                    '<div class="msg_wrap"> <div class="msg_body"><div class="msg_push"></div></div>'+
                    '<div class="msg_footer"><textarea class="msg_input" rows="4" placeholder="Type a message..." style="padding: 8px;" id="'+userID+'"></textarea></div>'+
                    '<button type="submit" name="submit" id="'+userID+'" class="send_rec"><i class="fa fa-arrow-right"></i></button>    </div>  </div>' ;                   

        $("body").append(chatPopup);
        displayChatBox();
    });
    $(document).on('keypress', 'textarea' , function(e) {       
        if (e.keyCode == 13 ) {         
            var msg = $(this).val();        
            $(this).val('');
            if(msg.trim().length != 0){             
                var chatbox = $(this).parents().parents().parents().attr("rel") ;
                $('<div class="msg-right">'+msg+'</div>').insertBefore('[rel="'+chatbox+'"] .msg_push');
                $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
            }
        }
    });
    function displayChatBox(){ 
        i = 270 ;
        j = 260;
        $.each( arr, function( index, value ) {  
            if(index < 4){
                $('[rel="'+value+'"]').css("right",i);
                $('[rel="'+value+'"]').show();
                i = i+j;             
            }
            else{
                $('[rel="'+value+'"]').hide();
            }
        });     
    }
    $(document).on("keypress", "button",function(){
        friend_id = this.id;
        alert(friend_id);
    });
});

В этом коде у меня есть окно чата.Теперь, что произойдет, когда я использую следующий код, как упомянуто ниже, это значение предупреждения.

$(document).on("keypress", "textarea",function(){
        friend_id = this.id;
        alert(friend_id);
    });

, но когда я использую

$(document).on("keypress", "button",function(){
        friend_id = this.id;
        alert(friend_id);
    });

, ничего не произойдет, когда я использую keypress над кнопкойНе знаю почему?В чем проблема с button?Итак, как я могу получить значение в окне предупреждения, когда keypress на кнопку?Пожалуйста, помогите мне.

Спасибо

Answer 1

После получения дополнительной информации от OP в комментариях стало ясно, что он хочет предупредить значение userID и значение textarea при нажатии клавиши Enter внутри области textarea.Один из подходов к достижению этого будет:

// Event handler on textareas
$('textarea').on("keypress", function (e) {

    // Detect Enter key pressed
    if(e.which === 13){

        // Get the userID
        let friend_id = this.id;

        // Get the textarea value
        let txt_val = this.value;

        // Alert the data
        alert('userID: '+friend_id+' Textarea Value: '+txt_val);
    }
});

Answer 2

Думаю, вы ищете событие click.Ваш код работает для нажатия клавиши.

$(document).on("click", "button",function(){
        friend_id = this.id;
        alert(friend_id);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnTest">Test</button>