Jquery shoutbox IE错误

时间:2011-09-30 19:45:56

标签: javascript jquery html ajax

嘿我有一些关于shoutbox的jquery / ajax代码,而我遇到的问题是在IE中输入消息周围的表单标签和html代码中的提交按钮时,按下消息中的回车键它正在重新加载页面,这在其他浏览器中没有出现,所以我删除了表单,因为它不需要,输入键现在在IE中提交消息但不在chrome或firefox中提交。有没有办法我可以同时进行onclick事件并一起输入事件来纠正这个问题?在点击按钮时,按钮被禁用2秒然后重新设定,如果按下确认按钮,我也需要这样做。

我知道我的shoutout盒子里有很多内联css,但它现在只是一个测试版本,一旦完成它我会整理它。

非常感谢任何帮助。

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);
    }
    });
}

1 个答案:

答案 0 :(得分:1)

由于所有这些都是通过AJAX完成的,因此您可能会发现根本不包含<form>元素会更容易。

这样,您可以避免<form>中表单元素出现的所有令人讨厌的特定于浏览器的行为 - 例如,如果按下<button>,则会自动提交表单。

您说当您在其他浏览器中删除它时,输入键无法正常工作 - 例如,Chrome或Safari JS调试控制台是否收到任何错误?