javascript在按下按钮或返回键时从输入转到URL

Question

我有一个带有输入字段的页面，我想将用户发送到他们在输入中输入的 URL，并在末尾附加 -.html。 我的 HTML 如下：

<form name="codeform"> 
<input type="text" id="code" name="code" autofocus>
</form>

<a href="#" class="button" id="submit">SUBMIT</a>

还有我的 javascript：

$('#submit').click(function () { location.href = window.document.codeform.code.value + '.html'; });

当用户单击按钮时，脚本按预期工作并且用户转到该页面。 但我也希望在按下返回键时执行脚本。 现在，当按下返回键时，它会尝试提交表单，我最终得到一个查询字符串。

无论按下按钮还是返回键，将用户发送到页面的最佳方式是什么？

Answer 1

因为您的a.button在表单之外，所以您也需要向表单和a.button添加触发器。 然后只需检测Enter keycode ，就完成了。

 $('form').submit(function(e) { e.preventDefault(); console.log(window.document.codeform.code.value + '.html') }); $('form').keydown(function(e) { if (e.which == 13) { console.log(window.document.codeform.code.value + '.html') } }); $('#submit.button').click(function() { console.log(window.document.codeform.code.value + '.html') });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <form name="codeform" id="codeform"> <input type="text" id="code" name="code" autofocus> </form> <a href="#" class="button" id="submit">SUBMIT</a>

Answer 2

您可以添加一个仅在输入时运行的 keydown 侦听器（键码 13），然后阻止默认的表单提交操作：

$('#submit').click(function () { location.href = window.document.codeform.code.value + '.html'; });
$('#code').keydown(function (event) {
    if(event.which==13){
        event.preventDefault();//prevents form submission
        location.href = window.document.codeform.code.value + '.html';
    }
});

Answer 3

由于您将逻辑附加到按钮 click() 事件，您可以简单地将 keypress() 事件附加到输入框以随后执行按钮单击。

$("#code").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $('#submit').click();       
    }
});

但是，为了整洁，我通常更喜欢将逻辑从 click 事件移动到一个单独的函数中，并从 click() 和 keypress() 事件中调用该函数。