使 onclick 功能与 Safari Mobile (iOS) 上的 ENTER 和“Go”按钮一起使用答案

【问题标题】：Make onclick function work with ENTER and "Go" button on Safari Mobile (iOS)使 onclick 功能与 Safari Mobile (iOS) 上的 ENTER 和“Go”按钮一起使用
【发布时间】：2023-04-04 03:02:01
【问题描述】：

我有一个表单，其中按钮调用函数onclick：

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

function calcRoute() {
    var start = document.getElementById('start').value;
      var end = "My Address in Rome";
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
      };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

如果您单击 Go 按钮 (<input type="button">)，它可以在每个浏览器上正常工作。如果我填写 <input type="text"> 并按键盘上的 ENTER （或者例如按 iOS 键盘中的 Go 按钮），则不会。所以：如果我按下input type="button"，它会起作用，而不是如果我从键盘按下 ENTER。我怎样才能让它也这样工作？

编辑：请不要使用 jQuery 或其他框架。 :)

【问题讨论】：

为什么不使用提交按钮，为什么使用内联javascript？
嗯，如果我将其更改为 <input type="submit"> 仍然不起作用。内联js是什么意思？ :)
他的意思是onclick="calcRoute();"。出于与内联样式类似的原因，这不受欢迎。我们通过在窗口加载中绑定事件处理程序来避免内联 javascript，或者如果使用 jquery，则准备好文档。但我们应该在这里回答你的问题，而不是批评你的代码风格。

标签： javascript html onclick dom-events buttonclick

【解决方案1】：

您真的应该删除那个内联 javascript 并将那个按钮变成一个真正的提交按钮。之后，您可以轻松捕获正在提交的表单（无论是输入键还是提交按钮）：

form.addEventListener('submit', calcRoute);

演示：http://jsfiddle.net/ghK4P/

【讨论】：

我试过了（这里是你的代码的演示）：ffio.it/test.html 点击“calcola percorso”。当您键入地址时，它应该构建路线。什么都没有发生... :)
你已经覆盖了函数calcRoute()。只需将e.preventDefault() 添加到您自己的函数中，不要忘记将e 作为参数添加。
另外，在您的具体情况下，您更愿意这样做var form = document.getElementbyId('percorsoform');
这里我把你的代码放在现有的函数 calcRoute() 中：ffio.it/test2.html
不，你应该把那部分留在原处。我说的是里面有e.preventDefault();的部分。

【解决方案2】：

试试这个：

<form onsubmit="calcRoute()">
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

我相信这两者都适用

【讨论】：

嗯，不 :'(。表单以这种方式提交到服务器（在 URL 中我有 ?start=INPUT_TEXT
我不知道您要做什么，因此无法正确回答，但请尝试：
嗯，不。相同的行为。这是演示：goo.gl/wr3qi，点击“calcola percorso”。 :)
@MultiformeIngegno 我已经发布了另一个答案，请查看

【解决方案3】：

如果你使用 jquery，可能会在你的代码中添加这个

$(document).ready(function() {
$("#start").bind('keyup',function(event){
    if(event.keyCode == 13){
        $("#start").click();
    }
});
});

它会在你的文本框中按下回车键触发你的按钮点击功能。

如果你不使用 jquery，试试这个

<input type="text" id="start" name="start" onkeydown="if (event.keyCode == 13) document.getElementById('fire_calRoute').click()">
<input type="button" id='fire_calRoute' onclick="calcRoute();" value="Go">

试试这个，希望它能解决你的问题。

【讨论】：

很遗憾我不想使用 jQuery。

【解决方案4】：

<input type="text" id="start" name="start" onkeypress="return calcRoute(event)">

现在修改你的脚本如下：

function calcRoute(e) {
    if (e.keyCode == 13) {
        //your code
    }
}

【讨论】：

你能说出你的期望和得到什么吗？
它应该像这样工作（输入罗马的地址并按下“Go”按钮）：goo.gl/wr3qi
你能告诉我罗马的地址，以便我测试吗？
是的，对不起 :D 试试“Via Eugenio Checchi, Roma”
如果您输入该地址并按下“Vai”（开始）按钮

【解决方案5】：

我找到了解决方案:)

<form onsubmit="calcRoute(); return false">
    <input type="text" id="start" name="start">
    <input type="submit" value="Vai">
</form>

【讨论】：

不使用form标签有什么办法吗？