How do I call a function by pressing Enter on an input

Question

How do I call a function by pressing Enter on an input

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (0 votes)

5

I'm creating a chat for a site and I need the user to just hit enter and the message appears in chat , this function usually works with a field textarea but with input no.

HTML

<form action="" method="post" id="frm-msg">
    <fieldset>
        <label> 
            <input type="text" name="mensagem" id="mensagem" class="textarea" />
        </label> 
    </fieldset>
</form>

JavaScript

$(function() {
     //inserir
     $("#submit").click(function() {
         var msg = $("#mensagem").val();
         msg = $.trim(msg);
         if (msg != '') {
             $.post('chat.php', {
                 mensagem: msg,
                 acao: 'inserir'
             }, function(retorno) {
                 $("#painel").prepend(retorno);
                 $("#mensagem").val('');
             });
         }
     });
     //atualizar
     setInterval(function() {
         $.post('chat.php', {
             acao: 'atualizar'
         }, function(retorno) {
             $("#painel").html(retorno);
         });
     }, 5000);
     $(document).keypress(function handleEnter(e, func) {
         if (e.keyCode == 13 || e.which == 13) {
             var msg = $("#mensagem").val();
             msg = $.trim(msg);
             if (msg != '') {
                 $.post('chat.php', {
                     mensagem: msg,
                     acao: 'inserir'
                 }, function(retorno) {
                     $("#painel").prepend(retorno);
                     $("#mensagem").val('');
                 });
             }
         }
     });
 });

javascript jquery

asked by anonymous 04.02.2014 / 16:18

4 answers

How do I delete a file marked with the "read only" attribute? Ruby application that keeps reloading source files

score 5 · Answer 1

5

I think something like this:

$(document).on('keydown', function(event) {

    if(event.keyCode === 13) {

        // Sua função aqui

    }

});

04.02.2014 / 16:21

score 3 · Answer 2

Native Javascript:

document.addEventListener('keydown', function (event) {
    if (event.keyCode !== 13) return;
    // Aqui seu código
}):

jQuery:

$(document).on('keydown', function (event) {
    if (event.keyCode !== 13) return;
    // Aqui seu código
}):

You can replace document with the element of your field, using either querySelector('#idDoElemento') or jQuery $('#idDoElemento')

Save the condition that the focus should be on the child element or child.

score 2 · Answer 3

Uploading Enter into an input causes submit / send to form , whereas in textarea creates a new line.

So the answer to your question goes by what I mentioned above and also by code that "listens" to the keyboard and looks for when the Enter key (which has the code 13 ) is loaded. Once your input has an ID you can use it like this:

$('#mensagem').on('keydown', function(event) { // também pode usar keyup
    if(event.keyCode === 13) {
        // Correr código
    }
});

Given the first problem mentioned, you have two options:

# 1 Remove the <input> element from within the Example

# 2 prevent sending% of form :

An alternative is to prevent HTML directly

<form onkeypress="return event.keyCode != 13;">

Example

Another is without having javascript in the html, adding this to your JavaScript:

$('#frm-msg').on('submit', function(){
    return false;
});

Example

score 0 · Answer 4

0

Using JQuery is very simple

HTML

<input type="text" id="meuInput" />

Javascript

$('#meuInput').keydown(function(e){
 if (e.which == 13){
   chamaFuncao() // executa o que vc precisar
 }
})

16.12.2016 / 17:01