javascript - 单击但保持锚定

Question

我有一个使用 anchor 而不是链接的导航栏。我正在制作一个聊天功能，每次用户在聊天中输入一些内容，然后按回车键，他们就会被重定向到第一个 anchor 。我知道我可能需要使用 AJAX，但我似乎无法弄清楚。这是代码。

<div id="tab3">
    <h2>Chat Room</h2>

    <div id="chatboxlog">
        <div id="chatlog">
            Loading chat please wait...
        </div>
    </div>

    <div id="chatinput">
        <form name="chatbox" class="userchat">
            <input class="userchat" name="message" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()"/><br>
            <input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
        </form>
    </div>
</div>

<script>
function submitChat() {
    if(chatbox.message.value == '') {
        alert('Error: Missing Fields.');
        return;
    }

    var message = chatbox.message.value;
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4&&xmlhttp.status==100) {
            document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open('GET','chat.php?message='+message, true);
    xmlhttp.send();
    chatbox.reset();
}

$(document).ready(function(e) {
    $.ajaxSetup({cache:false});
    setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>

Answer 1

在我看来，您只是在提交表单时遇到问题(通常在焦点位于表单子(monad)元素(而不是textarea)时用户点击“Enter”时发生)并且它会自动重新加载您的页面。

例如，当表单上未指定任何操作时，就会发生这种情况:后者尝试重新加载浏览器导航栏中当前的内容(“位置”)。在您的情况下，如果该位置具有另一个 anchor 的片段(哈希)，则页面将简单地滚动到该 anchor 。

您可以使用event.preventDefault()来阻止表单提交操作，可以在您的文本输入中，或者更好地在表单本身上，通过在 submit 事件上附加回调。

// NOTE: try using id's rather than names.
// Select the appropriate form.
var form = document.querySelector('form[name="chatbox"]');

form.addEventListener("submit", function (event) {
    // Prevent the form from reloading the page.
    event.preventDefault();
});

演示:http://jsfiddle.net/8odryt5p/1/