Home / Questions / 137760
Accepted
Alberto Julio Arce Escolar
Asked: 2020-02-12 11:23:18 +0800 CST 2020-02-12 11:23:18 +0800 CST

Problems with Click and Keydown function

  • 772

My problem is that it only works if I click on the button and if I place the keydown then I have to tab on the button and hit enter. I want it to work by clicking the send button and hitting enter in the field like chats. any idea how to do it.

<form id="mensajeform">
          <input type="text" id="nick" value="<?php echo $_SESSION["nombres"];?>" hidden>
          <input id="mensaje" placeholder="Escribir un mensaje aqui" id="first_name" type="text" class="validate col s11">
          <div id="enviar"  style="background-color:  transparent;border:  transparent;"><img src="views/imagen/enviar.png"></div>
          </form>



$("#enviar").click(function(){

    nick = $("#nick").val();
    mensaje = $("#mensaje").val();

    console.log(nick,mensaje);

    });
html

1 Answers

  1. Best Answer

    Create a function with the send functionality and call it from both the clickbutton event and the keydowntext box event if the key pressed is Enter:

    function enviar(){
  nick = $("#nick").val();
  mensaje = $("#mensaje").val();

  console.log(nick,mensaje);
}

$(function(){
  $('#enviar').click(enviar);
  $('#mensaje').keydown(function(e){
    if (e.key === 'Enter') enviar();
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mensajeform">
          <input type="text" id="nick" value="Nick_Usuario" hidden>
          <input id="mensaje" placeholder="Escribir un mensaje aqui" id="first_name" type="text" class="validate col s11">
          <div id="enviar"  style="background-color:  transparent;border:  transparent;"><img src="views/imagen/enviar.png"></div>
</form>

    • 2