JQuery shoutbox IE erreur

Question

Hey j'ai un code jquery/ajax pour une shoutbox et le problème que je rencontre est celui de IE quand j'ai eu les étiquettes de forme autour du message d'entrée et de soumettre le bouton dans le code html, en appuyant sur la touche Entrée Dans la boîte de message il rechargeait la page, cela ne se produisait pas dans d'autres navigateurs, donc j'ai enlevé le formulaire parce qu'il n'était pas nécessaire, et la clé d'entrée soumet maintenant le message dans IE mais pas dans chrome ou firefox. Y at-il un moyen que je puisse avoir à la fois un événement onclick et entrer un événement ensemble pour corriger cela? Pour le moment, une fois que le bouton est cliqué, le bouton est désactivé pendant 2 secondes, puis il est possible de le faire si le bouton Entrée est enfoncé.

Je sais que j'ai beaucoup de css en ligne pour le shoutout box mais c'est juste une version de test pour le moment, je vais ranger ça une fois terminé.

Toute aide est très appréciée.

I had the form tag like so 
<form method="POST" action=""/> 

    <div id="shoutout" style="position:absolute; height:auto; overflow-x:hidden; overflow-y:hidden; float:right; right:10px; background-color:#121212; color:#FFFFFF; font-size:14px; width:305px; padding-left:1px; padding-right:1px; padding-bottom:1px; font-family: Arial, Helvetica, sans-serif;"> 
     <h2>Shout Out!</h2>     
       <strong>Message:</strong> 
       <input type="text" id="message" name="message"/> 
       <input type="submit" id="submit" value="Submit"/> 
     <div id="messagecontainer" style="position:relative; height:240px; overflow-x:hidden; overflow-y:auto; background-color:#F5F5F5; color: #F6221D; font-size:12px; width:305px; margin-top:5px;"> 
     <div id="shoutmessages" style="position:relative; word-wrap: break-word; padding-left:5px; width:auto; height:auto; overflow-y:hidden; overflow-x:hidden;"> 
     </div> 
     </div> 
     </div> 

//JQUERY AJAX CODE BELOW 

<script type="text/javascript"> 
$(function(){ 

refresh_shoutbox(); 
setInterval("refresh_shoutbox()", 10000); 

var running = false; 

$("#message").keypress(function(e){ 
    if (e.which == 13 && running === true){ 
     return false; 
    } 
}); 

$("#submit").click(function(){ 
    if ($("#message").val() != ''){ 
     running = true; 
     $("#submit").attr("disabled","disabled"); 
     setTimeout(function(){ 
     $("#submit").removeAttr("disabled") 
     running = false; 
     }, 2000); 
     }else{     
     return false; 
     } 

    var name = $("#name").val(); 
    var message = $("#message").val(); 
    var data = 'name=' + name + '&message=' + message; 

    $.ajax({ 
     type: "POST", 
     url: "shout.php", 
     data: data, 
     success: function(html){ 
      $("#shoutmessages").slideToggle(0, function(){ 
      $(this).html(html).slideToggle(0); 
      $("#message").val(""); 
      }); 
     } 
    });  
    return false;  
}); 
}); 

function refresh_shoutbox(){ 
    var data = 'refresh=1'; 
    $.ajax({ 
     type: "POST", 
     url: "shout.php", 
     data: data, 
     success: function(html){ 
     $("#shoutmessages").html(html); 
    } 
    }); 
} 

Answer 1

Comme tout cela se fait via AJAX de toute façon, vous pouvez trouver plus facile de ne pas inclure l'élément <form> du tout.

De cette façon, vous évitez tous les comportements gênants spécifiques au navigateur qui se produisent avec les éléments de formulaire dans un <form> - comme la soumission automatique de formulaires si un <button> est pressé.

Vous avez dit que lorsque vous l'avez supprimé dans les autres navigateurs, la touche d'entrée ne fonctionnait pas. Avez-vous reçu des erreurs de la console de débogage de Chrome ou Safari JS, par exemple?