1

Bom estou tentando minimizar ao maximo como esta bem pequeno vou postar o meu codigo inteiro, me deparei com um problema o codigo esta funcionando perfeitamente, porem so quando clico no button enviar que funciona, gostaria de saber como fazer para que funcione apertando a tecla enter ou clicando.OBS:Não manjo muito de jquery

index.html

 <div id="chat"></div><br />
  <form action="#" method="post">
  <input type="hidden" id="nome" value="<?=$usuario?>" size="6">
  <input type="text" id="mensagem" width="80%" >
  <button type="button" id="enviar" title="enviar" >Enter</button>
  </form>

chat.php

<?php
$nome = $_POST['nome'];
$mensagem = $_POST['mensagem'];
$linha = $nome.' - '.$mensagem.'<br>';
$arquivo = file('chatlog.htm');
array_unshift($arquivo, $linha);
file_put_contents('chatlog.htm', $arquivo);
?>

script

  $(function() {
conversar();
$('#enviar').click(function() {
    var nome = $('#nome').val();
    var mensagem = $('#mensagem').val();
    $.post('chat.php', {'nome':nome, 'mensagem': mensagem }, function() {
      conversar;
    $('#mensagem').val('');
    });
});

function conversar() {
  $('#chat').load('chatlog.htm');
  $('#mensagem').focus();
}
setInterval(conversar, 3000);
});

css

 #chat {
    width: 300px;
    height: 400px;
    border: black 1px solid;
    background-color: #000000;
    overflow-x: hidden;
    overflow-y: scroll; 
    padding: 5px;
    margin-left: 10px;
   }
   fieldset {
    width: 330px;
    background-color: #e6e2af;
    border: black 1px solid;
   }

os dados sao salvos num arquivo de nome chatlog.htm

1
  • Ao inves de type button experimente type submit, no Chrome rodou legal <button type="submit" id="enviar" title="enviar" >Enter</button>``
    – user60252
    Commented 19/06/2018 às 13:44

2 Respostas 2

4

Uma boa opção será criar uma função em JavaScript para responder aos eventos de keypress no input onde se digita a mensagem:

function enviarEnter(e){
    var tecla=(window.event)?event.keyCode:e.which;
    if (tecla == 13)
    {
        //coloca se o que precisa fazer, ex: função ajax;
    }
}

E no input ficaria assim:

<input type="text" id="mensagem" onkeypress="enviaEnter(event)"/>

Dessa forma a cada tecla pressionada ele vai verificar se a tecla primida foi um Enter e se for o caso, ele irá executar a função.

9
  • tentei o seguinte $(document).ready(function() { $(#mensagem).bind('keypress', function(e) { if(e.keyCode==13){ $('#enviar').trigger('click'); } }); }); porem sem resultado quando aperto enter conteidnua atualizando a pagina ao inves de chamar o jquery Commented 6/02/2016 às 23:53
  • Qual navegador esta usando? Commented 7/02/2016 às 0:01
  • chorme e mozila Commented 7/02/2016 às 0:07
  • Ja tentou no internet explorer, se nao me engano KeyCode não funciona no mozilla, testa pra sabermos. Commented 7/02/2016 às 0:10
  • mesma coisa, quando dou enter atualiza a pagina inteira. caso queira ver na pratica yugioh.site Commented 7/02/2016 às 0:13
0

Sobre o atributo type dos buttons

  1. submit: O botão envia os dados do formulário para o servidor.
  2. button: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.

Use o type submit que a tecla enter vai funcionar!

<button type="submit" id="enviar" title="enviar" >Enter</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .