如何提醒按键事件的价值？

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);
    });
});

在这段代码中，我创建了一个聊天框 window。现在，当我使用下面提到的以下代码时会发生什么警报值。

$(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 over 按钮时没有任何反应我不知道为什么？ button 有什么问题？那么，当按钮上 keypress 时，如何在警告框中获取值？请帮助我。

谢谢

Answer 1

我想您可能正在寻找点击事件。您的代码确实适用于按键事件。

$(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>

Answer 2

在评论中从 OP 获得更多信息后，很明显他想在文本区域内按下 Enter 键时提醒 userID 和文本区域值。实现这一目标的一种方法是：

// 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);
    }
});

如何提醒按键事件的价值？

How to alert value on keypress event?

jquery

chat

window