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

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

$('#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（）事件中调用该函数。

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

3 个答案: