当我按Enter键时，表单不会调用javascript函数

Question

<form id="search" onSubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="button" value="Go" class="go" id="go" onclick="go()">
</form>

我在网页底部获取的外部javascript文档中具有该功能，当我单击“提交”按钮时，该功能有效，但在按Enter键时，该功能无效。

我的go函数：

function go() {
var input = document.getElementById('searchbar').value;
var words = input.split(" ");
var wordsLength = words.length;
var searchWords = '';

if(words[0] == 'search' || words[0] == 'Search') {
    for(var x = 1; x < wordsLength; x++) {
        searchWords += words[x];
        if(x == wordsLength-1) {
        } else {
            searchWords += '+';
        }
    }
    window.location.replace("http://www.google.com/#q=" + searchWords);
} else if(words[0] == 'navigate' || words[0] == 'Navigate') {
    for(var x = 1; x < wordsLength; x++) {
        searchWords += words[x];
        if(x == wordsLength-1) {
        } else {
            searchWords += '+';
        }
    }
    window.location.replace("http://www.google.com/maps/place/" + searchWords);
}
}

Answer 1

你需要改变

<input type="button" value="Go" class="go" id="go" onclick="go()">

至

<input type="submit">

Answer 2

<form id="search" onsubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit">
</form>

Answer 3

您的按钮ID和功能名称相同，只是其中之一。

<form id="search" onSubmit="go()">
     <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
     <input type="button" value="Go" class="go" id="_go" onclick="go()">
</form>

Answer 4

尝试使用jQuery解决方案。

<form id="search">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit" value="Submit">
</form>

在Form Submit上调用go() 。

$(document).ready(function() {
    $('#search').submit(function() {
        //Add code from go() or just call go()
    });
});

更新 ：

<form id="search" onSubmit="go()">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="submit" value="Submit">
</form>

jQuery部分。

$(document).ready(function() {
    $('#searchbar').live("keypress", function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            e.preventDefault();
            e.stopPropagation();
            $(this).closest('form').submit();
        }
    });
});

Answer 5

试试这个，它正在工作。

HTML

<form id="search" onSubmit="return false">
    <input autofocus autocomplete="off" type="text" class="searchbar" id="searchbar" placeholder="Search Keywords: search, navigate, weather" required>
    <input type="button" value="Go" class="go" id="go">
</form>

JavaScript的

$('form').keypress(function (e) {
  if (e.which == 13) {
    go($('#searchbar').val());
    $('form#search_form').submit();
    return false;  
  }
});

function go(keyword){
    alert('Your search keyword is [' + keyword + ']');
}

现场例子