How to add "Enter" key from keyboard to press a html button?

Question

I have a chat application and I want users can send message just by pressing Enter key. for now, they send message by mouse clicking.

here is my codes :

var chat_input_send = document.createElement('button')
        chat_input_send.setAttribute('id', 'chat_input_send')
        chat_input_send.setAttribute('disabled', true)
        chat_input_send.innerHTML = `<i class="far fa-paper-plane"></i>`
        var chat_input = document.createElement('input')
        chat_input.setAttribute('id', 'chat_input')
        chat_input.setAttribute('maxlength', 1000)
        chat_input.placeholder = `${parent.get_name()}. Say something...`
        chat_input.onkeyup  = function(){
          if(chat_input.value.length > 0){
            chat_input_send.removeAttribute('disabled')
            chat_input_send.classList.add('enabled')
            chat_input_send.onclick = function(){
              chat_input_send.setAttribute('disabled', true)
              chat_input_send.classList.remove('enabled')
              if(chat_input.value.length <= 0){
                return
              }
              parent.create_load('chat_content_container')
              parent.send_message(chat_input.value)
              chat_input.value = ''
              chat_input.focus()
            }
          }else{
            chat_input_send.classList.remove('enabled')
          }
        }

I know this is the way but I cant make it work in my codes:

anyone can help me?

    $('#idoftextbox').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
        //enter has been pressed
    };
    });

Does this answer your question? [How to bind enter key ?](https://stackoverflow.com/questions/10037422/how-to-bind-enter-key-to-callback-in-javascript-without-slowing-down-the-typing) — OMi Shah, Aug 24 '23 at 09:00
Also, https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box and other tones of dups questions. Please have a look at them using the search box. — OMi Shah, Aug 24 '23 at 09:00
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Aug 24 '23 at 09:36

score 1 · Accepted Answer · answered Aug 24 '23 at 09:03

You can simulate the click on the button. With .click()

Replace $('#idoftextbox') with chat_input and then use the keyCode or which property to identify the Enter key press:

chat_input.addEventListener('keypress', function (e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
        // Enter key has been pressed
        chat_input_send.click(); // Trigger the send button's click event
        e.preventDefault(); // Prevent the default behavior of the Enter key (form submission)
    }
});

So here is the modified code:

var chat_input_send = document.createElement('button')
chat_input_send.setAttribute('id', 'chat_input_send')
chat_input_send.setAttribute('disabled', true)
chat_input_send.innerHTML = `<i class="far fa-paper-plane"></i>`

var chat_input = document.createElement('input')
chat_input.setAttribute('id', 'chat_input')
chat_input.setAttribute('maxlength', 1000)
chat_input.placeholder = `${parent.get_name()}. Say something...`

chat_input.addEventListener('keyup', function() {
    if (chat_input.value.length > 0) {
        chat_input_send.removeAttribute('disabled')
        chat_input_send.classList.add('enabled')
    } else {
        chat_input_send.classList.remove('enabled')
    }
});

chat_input.addEventListener('keypress', function (e) {
    var code = e.keyCode || e.which;
    if (code === 13) {
        chat_input_send.click();
        e.preventDefault();
    }
});

chat_input_send.onclick = function() {
    chat_input_send.setAttribute('disabled', true);
    chat_input_send.classList.remove('enabled');
    
    if (chat_input.value.length <= 0) {
        return;
    }

    parent.create_load('chat_content_container');
    parent.send_message(chat_input.value);
    chat_input.value = '';
    chat_input.focus();
};

This code will enable you to send a message by pressing the Enter key while focusing on the chat input field. It triggers the same logic that the "Send" button's click event does.

Hope it helps :D

How to add "Enter" key from keyboard to press a html button?

1 Answers1